What's the proper way to cancel all JS setTimeout , setInterval and requestAnimationFrame after a given amount of seconds ?

Edit: Sorry, I should have explained more! The code comes from either Database or some API, so I cannot keep track of the timeout,raf or interval IDs. So I don't have the IDs of the timers that I can easily you to clearInterval or clearTimeout or cancelAnimationFrame. I know I have to use them, but I don't know how to get all the animation IDs (if there are any).

What's the proper way to cancel all JS setTimeout , setInterval and requestAnimationFrame after a given amount of seconds ?

Edit: Sorry, I should have explained more! The code comes from either Database or some API, so I cannot keep track of the timeout,raf or interval IDs. So I don't have the IDs of the timers that I can easily you to clearInterval or clearTimeout or cancelAnimationFrame. I know I have to use them, but I don't know how to get all the animation IDs (if there are any).

• javascript
• jquery
• animation

• 1 possible duplicate of stackoverflow.com/questions/3141064/… – Patrick Oscity Commented Jul 7, 2012 at 10:24
• In that case it's not possible to cancel them. The only other thing you could do is overwrite the functions they refer to, provided the setTimeout calls have been provided named function references. Overwrite each referenced function with a new empty function and nothing will happen when the timeout occurs. – Graham Commented Jul 7, 2012 at 10:26
• 4 in the post i linked to in the above comment, there is an answer that redefines the methods setInterval and setTimeout and automatically registers those in a global list, which is then used to clear all of them. It may be very interesting for your purpose. – Patrick Oscity Commented Jul 7, 2012 at 10:27

2 Answers 2

You need to keep the Id of each interval, timeout and requestAnimationFrame you've created and call window.clearInterval(id) etc. on them.

A verfy hackish/brute force way to do it would be something like:

for (var i = 1; i < 99999; i++) {
    window.clearInterval(i);
    window.clearTimeout(i);
    window.mozCancelAnimationFrame(i); // Firefox
}

But I wouldn't recommend that.

Update:

To do it after a certain amount of time:

setTimeout(function () {
   for (var i = 1; i < 99999; i++) {
        window.clearInterval(i);
        window.clearTimeout(i);
        window.mozCancelAnimationFrame(i); // Firefox
    }
}, 3000); // After 3 seconds

Update 2:

I don't believe there is a better way than the brute force way if you don't keep a reference for each time out etc, so to make it a bit easier to do that (as suggested by this SO answer), you could override the default setInterval:

var intervals = new Array();
window.oldSetInterval = window.setInterval;
window.setInterval = function(func, interval) {
    intervals.push(oldSetInterval(func, interval));
}

// Now you can loop over intervals and clear them 
// one by one when ever you want to.

for (var interval in intervals) {
   window.clearInterval(interval);
}

The example shows how to do it for setInterval, but could of course be done the same way on setTimeout and requestAnimationFrame as well.

You'll need to obtain references to each timeout (the return value of setTimeout) then use clearTimeout() then you wish you cancel them. Same for setInterval.