title: setInterval and clearInterval not working as expected
body: <p>I have this function which acts as a loading box using <code>setInterval</code> to change the background images which creates a flashing effect.</p>
  
  <pre><code> function loading() {
      clearInterval(start);
  
      var i = 0;
      function boxes() {
  
          in_loading = ".in_loading:eq("  + i + ")";
          $(".in_loading").css("background", "url(images/load_bar_green.png)  no-repeat");    
          $(in_loading).css("background", "url(images/load_bar_blue.png)  no-repeat");        
  
          if(i == 3) {
              i = 0;
          } else {
              i++;
          }
  
      }
      var start = setInterval(function() {
          boxes();
      }, 350);
  }
  </code></pre>
  
  <p>But even with <code>clearInterval</code> if I click on it more than once the flashing goes out of order. I tried removing the boxes, hiding them but I can't seem to get the 'buffer' cleared? Any ideas?</p>