How to stop setInterval?

Question

<span id="ccc">10</span> <span id="start">start</span> <span id="stop">stop</span> $('#start').click(function(){ var c = $('#ccc').text(); var inter = setInterval(function() { c--; $('#ccc').text(c); }, 1000); }); $('#stop').click(function(){ clearInterval(inter); }); 

How should I rewrite this to use STOP correctly?

LIVE: http://jsfiddle.net/c3hZh/

Answer 1

inter should be available for both functions. Wrap both functions with closure so that you can avoid contaminating the global namespace of the new variable.

 (function ($) { var inter; $('#start').click(function(){ var c; c = parseInt($('#ccc').text()); //make sure you're getting a numeric value //don't forget to clear any existing interval before setting a new one: if (inter) { clearInterval(inter); } inter = setInterval(function() { c--; $('#ccc').text(c); }, 1000); }); $('#stop').click(function() { clearInterval(inter); }); }(jQuery)); 

Answer 2

inter is a local variable.
It does not exist outside of your callback.

You need to use a global variable.

Answer 3

 var inter = 0;
 $ ('# start'). click (function () {
     var c = $ ('# ccc'). text ();
          inter = setInterval (function () {
                     c--;
                     $ ('# ccc'). text (c);
             }, 1000);
 }); 

 $ ('# stop'). click (function () {
      clearInterval (inter);
     });