How to stop a setTimeout loop?

Question

I'm trying to build a loading indicator with a image sprite and I came up with this function

function setBgPosition() {    var c = 0;     var numbers = [0, -120, -240, -360, -480, -600, -720];     function run() {        Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');         if (c<numbers.length)         {             setTimeout(run, 200);         }else         {             setBgPosition();         }     }     setTimeout(run, 200); } 

so the out put is looks like this

http://jsfiddle.net/TTkre/

I had to use setBgPosition(); inside else to keep this running in a loop so now my problem is how to stop this loop once I want [load finished]?

Answer 1

setTimeout returns a timer handle, which you can use to stop the timeout with clearTimeout.

So for instance:

function setBgPosition() {     var c = 0,         timer = 0;     var numbers = [0, -120, -240, -360, -480, -600, -720];     function run() {         Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');         if (c >= numbers.length) {             c = 0;         }         timer = setTimeout(run, 200);     }     timer = setTimeout(run, 200);      return stop;      function stop() {         if (timer) {             clearTimeout(timer);             timer = 0;         } } 

So you'd use that as:

var stop = setBgPosition(); // ...later, when you're ready to stop... stop(); 

Note that rather than having setBgPosition call itself again, I've just had it set c back to 0. Otherwise, this wouldn't work. Also note that I've used 0 as a handle value for when the timeout isn't pending; 0 isn't a valid return value from setTimeout so it makes a handy flag.

This is also one of the (few) places I think you'd be better off with setInterval rather than setTimeout. setInterval repeats. So:

function setBgPosition() {     var c = 0;     var numbers = [0, -120, -240, -360, -480, -600, -720];     function run() {         Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');         if (c >= numbers.length) {             c = 0;         }     }     return setInterval(run, 200); } 

Used like this:

var timer = setBgPosition(); // ...later, when you're ready to stop... clearInterval(timer); 

All of the above notwithstanding, I'd want to find a way to make setBgPosition stop things itself, by detecting that some completion condition has been satisfied.

Answer 2

I know this is an old question, I'd like to post my approach anyway. This way you don't have to handle the 0 trick that T. J. Crowder expained.

var keepGoing = true;  function myLoop() {     // ... Do something ...      if(keepGoing) {         setTimeout(myLoop, 1000);     } }  function startLoop() {     keepGoing = true;     myLoop(); }  function stopLoop() {     keepGoing = false; }