title: Javascript setTimeout not stopping on clearInterval()
body: <p>How do you stop a timer when clearInterval() does not stop it?</p>
  
  <p>The purpose of this code is to animate a number from 0 upwards until it reaches the end (eg animate from 0... 75%).  But the timer does not stop when I call clearInterval(): </p>
  
  <p><a href="http://jsfiddle.net/pwYEe/2/" rel="noreferrer">http://jsfiddle.net/pwYEe/2/</a></p>
  
  <pre><code>&lt;div id="foo"&gt;&lt;/div&gt;
  &lt;div id="bar"&gt;&lt;/div&gt;
  
  animate("99%", $("#foo")); // doesnt stop
  animate("75%", $("#bar")); // doesnt stop
  
  function loop(clr, clr2, ele, rand, last, delay) {
      clearInterval(clr);
      clearInterval(clr2);
      inloop(clr, clr2, ele, rand, last, delay);
  
      if (rand &gt;= last) {
          clearInterval(clr);
          clearInterval(clr2);
      }
      else {
          clr2 = setTimeout(function () {
              loop(clr, clr2, ele, rand, last, delay);
          }, 2500);
      }
  
  }
  function inloop(clr, clr2, ele, rand, last, delay) {
      ele.html((rand += 1) + "%");
  
      if (rand &gt;= last) {
          clearInterval(clr);
          clearInterval(clr2);
      }
      else {
          clr = setTimeout(function () {
              inloop(clr, clr2, ele, rand, last, delay);
          }, delay);
      }
  }
  
  function animate(end, display) {
      var clr = null;
      var clr2 = null;
      var ele = null;
      var rand = 0;  // initial number
      var last = 99; // last number
      var delay = 5; // inner loop delay
  
      ele = display;
      ele.html("0%");
  
      var idx = end.indexOf("%");
      if (idx &gt;=0) {
          end = end.substring(0,idx);
      }
      last = parseInt(end);
      loop(clr, clr2, ele, rand, last, delay);
  }
  </code></pre>