Question

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).

Answer 1

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.