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.

You could push each interval id into an array and then iterate over that when you want to clear them... — Josh Crozier, Dec 08 '15 at 23:24
Maybe this can help you: http://stackoverflow.com/questions/8635502/how-do-i-clear-all-intervals — Franco, Dec 08 '15 at 23:27

score 28 · Accepted Answer · answered Dec 08 '15 at 23:25

28

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.

answered Dec 08 '15 at 23:25

frosty

21,036
7
52
74

1

No. You would need to replace the for each with a for loop, or a lodash or jquery loop. – frosty Dec 09 '15 at 02:55
1

Thank you very much!!! – Vương Hữu Thiện Feb 07 '22 at 18:12

score 2 · Answer 2 · answered Dec 08 '15 at 23:25

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

score 2 · Answer 3 · answered Jul 03 '20 at 08:08

2

This worked for me:

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

answered Jul 03 '20 at 08:08

The Mask

390
3
17

score 0 · Answer 4 · answered Dec 08 '15 at 23:27

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.

score 0 · Answer 5 · answered Dec 08 '15 at 23:32

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

score 0 · Answer 6 · answered Dec 08 '15 at 23:37

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)

score 0 · Answer 7 · answered Jul 30 '20 at 22:52

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 = [];
  })

score 0 · Answer 8 · answered Sep 07 '22 at 03:31

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.

Clear all setIntervals

8 Answers8

Linked