Clear all setIntervals

Question

I'm using setIntervals within an each() function like so

$(".elements").each(function() {
    setInterval(function() {

    }, 1000);
});

Obviously a setIntervals is created for each element.

My question is: How do I clear all the setIntervals when I no longer need them? I have tried storing the setInterval in a variable and call window.clearInterval(int), but that only clears the last setInterval since each variable is overridden.

Answer 1

When you set an interval, you get a pointer to it:

var myInterval = setInterval(function(){}, 4000);

If you want to cancel an interval, you do the following:

clearInterval(myInterval); 

So, for what you want to do, you would do the following:

var intervals = [];
$(".elements").each(function() {
    var i = setInterval(function() {

    }, 1000);
    intervals.push(i);
});

Then if you need to cancel them all you can do this:

intervals.forEach(clearInterval);

That should do it for you.

Answer 2

There's no "clear-all-intervals" function.

You'll need to store all of them, and clear all of them:

var ints = [];

$(".elements").each(function() {
  ints.push( setInterval(function() {

             }, 1000) 
  );
});

// later

for ( var i = 0; i < ints.length; ++i )
  clearInterval( ints[i] );

ints = [];   // and forget them

Answer 3

var clearAllIntervals = function ( ) {

    var intervals = [];

    $(".elements").each(function() {
        intervals.push( setInterval(function() {

        }, 1000) );
    });

    return function clearAll ( ) {
        intervals.forEach( clearInterval );
    }

}( );

// When you want to clear them:
clearAllIntervals( );

If you are wanting to be compatible with IE8 or under you should shim .forEach, or replace it with a library equivalent, or a plain loop.

Answer 4

Since each interval is associated with an element, you could store the interval ID in the element:

$(".elements").each(function() {
  $(this).data('interval-id', setInterval(function() {
    // ...
  }, 1000));
});

Then, if you want to clear the intervals,

$(".elements").each(function() {
  clearInterval($(this).data('interval-id'));
});

Answer 5

I don't recommend you use this solution, but it really do the trick. The idea it to override setInterval function to collect all links to setInterval:

(function(originalSetInterval){
    var intervals = [];
    window.setInterval = function(func, timeout) {
        var newInterval = originalSetInterval(func, timeout);
        intervals.push(newInterval);
        return newInterval;
    }

    window.clearAllIntervals = function() {
        intervals.forEach(clearInterval);
    }
})(window.setInterval)

To do a better job you would also need to override clearInterval to remove all intervals being clear already:

(function(originalSetInterval, originalClearInterval){
    var intervals = [];
    window.setInterval = function(func, timeout) {
        var newInterval = originalSetInterval(func, timeout);
        intervals.push(newInterval);
        return newInterval;
    }

    window.clearInterval = function(interval) {
        originalClearInterval(interval);
        intervals.splice(intervals.indexOf(interval), 1)
    }

    window.clearAllIntervals = function() {
        intervals.forEach(clearInterval);
    }
})(window.setInterval, window.clearInterval)