JavaScript
Article

jQuery Clear All Timeouts

By Sam Deering

Firstly, setTimeout() and clearTimeout() are pure JavaScript functions but are regularly used in JavaScript animations and the jQuery library. Sometimes when you have timeouts set up you may want to cancel them, in order to do this you need to store the settimeout in a variable.

Looping setTimeouts

Inside this loop the timeout is always going to be the same value: eg: TIMEOUT=1773

for(i=0; i<10; i++)
{
  newTimeout = setTimeout(function()
  {
      console.log('TIMEOUT='+newTimeout);
  });
}

settimeout1

If we tweak it a little with and throw in a setInterval to control the timing it works.

i = 0;
var interval = setInterval(function()
{
    newTimeout = setTimeout(function()
    {
        console.log(this);
        console.log('TIMEOUT='+newTimeout);

    }, 100);

    i++;
    if (i > 10)
    {
        clearInterval(interval);
    }
}, 200);

output:

setimeout2

Here we can clearly see the timeouts are being assigned an integer value. So that’s how we can clear them all using this:

Clear all setTimeouts

for(i=0; i<100; i++)
{
  window.clearTimeout(i);
}

Further Reading

I wonder if it is possible to use jQuery to store timeout on object as data???

So then if an animation is queued using a setTimeout it could be stopped if it’s currently in animation or even before it’s started animating? hmm …

if (animateWidget !== undefined)
{
    //only do 10 windows
    for(i=0; i<10; i++)
    {
      window.clearTimeout(i);
    }
    //stop all animations on windows
    $('.containerPlus').stop();
}
var animateWidget = setTimeout(function()
{
    console.log('TIMEOUT: '+animateWidget);
    EVI.FLEXIDASH.tileDash();
}, 300);

No Reader comments

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.