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.

Cerecloth

You could push each interval id into an array and then iterate over that when you want to clear them... – Fortune

Maybe this can help you: #8636002 – Cadaver

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.

Footwear

No. You would need to replace the for each with a for loop, or a lodash or jquery loop. – Footwear

Thank you very much!!! – Brenneman

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

Bratton

Answer 3

This worked for me:

// clear interval
var id = window.setInterval(function() {}, 0);
while (id--) {
window.clearInterval(id);

Berkeleian

Answer 4

Interestingly, an interval handle ID is an incremental whole number greater than 0. So, all you'd have to do is create a no-function interval, and then for-loop it to clear all intervals from your latest interval handle ID down to 1.

let hInterval1 = window.setInterval(function(){console.log('interval A');},3000);
let hInterval2 = window.setInterval(function(){console.log('interval B');},3000);
for(let i = hInterval2; i > 0; i--) window.clearInterval(i);

If you run that sample, you'll see that we see 2 intervals running in the console emitting "interval A" and "interval B", and then by the time you run the for-loop, it stops both.

Marquand

Answer 5

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.

Sula

Answer 6

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'));
});

Cashmere

Answer 7

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)

Fca

Answer 8

When you set an interval, you get a pointer to it.
To clear all intervals, you'll need to store all of them:

var arr = [];
arr.push(setInterval(function () {
    console.log(1);
  }, 1000));
arr.push(setInterval(function () {
    console.log(2);
  }, 1000));
arr.push(setInterval(function () {
    console.log(3);
  }, 1000));

Following loop will clear all intervals

// Clear multiple Intervals
  arr.map((a) => {
    console.log(a)
    clearInterval(a);
    arr = [];
  })

Hyphenate