CODEWITHSUNDEEP
javascriptjquerysetintervalclearinterval
user3758078
user3758078

Reputation:

Clear all setIntervals

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.

Upvotes: 12

Views: 38286

Answers (8)

The Mask
The Mask

Reputation: 579

This worked for me:

// clear interval
var id = window.setInterval(function() {}, 0); // dummy setInterval
while (id--) {
    window.clearInterval(id); // clearing intervals that where added before ou dummy one
}

Upvotes: 3

Volomike
Volomike

Reputation: 24896

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.

Upvotes: 1

ashish siddhu
ashish siddhu

Reputation: 219

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

Upvotes: 0

Dmitry
Dmitry

Reputation: 1283

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)

Upvotes: 0

Oriol
Oriol

Reputation: 288290

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

Upvotes: 0

Paul
Paul

Reputation: 141827

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.

Upvotes: 0

frosty
frosty

Reputation: 21762

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.

Upvotes: 28

Paul Roub
Paul Roub

Reputation: 36438

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

Upvotes: 2

Related Questions