How can I clearInterval() for all setInterval()?

Question

I've got a setInterval() called in a jQuery plugin, but I want to clear it from my main page, where I don't have access to the variable that the setInterval was stored in.

Is there a way to clear all timers present on a page?

score 66 · Answer 1 · answered Aug 21 '11 at 03:00

66

This can be one of logic to clear all interval...

for (var i = 1; i < 99999; i++)
        window.clearInterval(i);

answered Aug 21 '11 at 03:00

Vinay

2,564
4
26
35

3

You probably wouldn't want to use this in production code, but I often use it interactively when troubleshooting. – undefined Jul 13 '12 at 22:38
is there any info on which maximum value for interval ID will be assigned in different browsers? if i recall correctly some browsers assign values consequentially from 1 and some assign random values? not sure of this – llamerr Nov 14 '12 at 17:31

score 26 · Answer 2 · edited Aug 21 '12 at 15:42

26

You can override setInterval:

window.oldSetInterval = window.setInterval;
window.setInterval = function(func, interval) {
    var interval = oldSetInterval(func, interval);
    // store it in a array for stopping? stop it now? the power is yours.
}

edited Aug 21 '12 at 15:42

Matt Ball

354,903
100
647
710

answered Jun 05 '09 at 22:57

Isaac Waller

32,709
29
96
107

2

I like this method. The next obvious function is onUnloadStopTimers. Consider it stolen. :) – Great Turtle Jul 08 '09 at 16:28
8

Why `new function` instead of `function`? – ThiefMaster Jul 06 '11 at 12:46
3

@ThiefMaster because he's the Java guy. – Sherzod Aug 03 '12 at 22:47
@Jakemmarsh Of course there's a naming collision. That's the whole point of this solution. The idea is to overwrite the setInterval function with something better. – Eliezer Berlin Aug 15 '19 at 08:02

score 10 · Answer 3 · answered Jun 05 '09 at 22:27

10

No, you can't, not without the original variable.

answered Jun 05 '09 at 22:27

Sasha Chedygov

127,549
26
102
115

score 7 · Answer 4 · edited Sep 03 '15 at 11:43

The answer

for (var i = 1; i < 99999; i++)
     window.clearInterval(i);

was the one I was looking for. With a little improvement of this very simple logic, I was able to do something like this.

var i = 0;
var rotatorId;
var rotator;

rotator =  setInterval(function() {myfunction(), 3000});
rotatorId[i] = rotator;
i++;

if (rotator > 1) {
   for(i = 1; i < rotatorId.length; i++){
      clearInterval(rotatorId[i]);                      
    }                       
}

score 3 · Answer 5 · answered Aug 21 '13 at 12:21

The way I have achieved this is by having an application level array (e.g., Application.setIntervalIds = []) to which I push the setInterval ids to whenever one is created. Then I can simply call window.clearInterval(id) on each id in the array when I need to.

As an example, when I create a new setInterval I write something like (coffeescript):

id = setInterval (() -> function2call()), timeout
Application.setIntervalIds.push id

And then I have a clearAllSetIntervals function I can call when needed:

Application.clearAllSetIntervals = () ->
    $.each Application.setIntervalIds, (index, id) ->
         window.clearInterval id

score 2 · Answer 6 · answered May 18 '17 at 10:38

Best way i found ...

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( );

score 1 · Answer 7 · answered Feb 16 '18 at 05:24

I'm storing each interval id in a hidden container then calling this function to loop through and remove each id with window.clearInterval..

function clearAllIntervals() {
    $('.intervals-holder span').each(function() {
        var clearThis = parseInt($(this).text(), 10); // gets the interval id from the span holder
        window.clearInterval(clearThis); // removes the interval
        $(this).remove(); // removes the span holding the id
    })
}

// setting interval
// (i clear all first because in my code the buttons can be double clicked..
// ..and there is more than one button to start what i want to be started)
function audioRingingInterval() {
    clearAllIntervals();
    var intervalId = setInterval(audioRingingStartFunction, 500);
    $('.intervals-holder').append('<span>'+intervalId+'</span>');
}
// i call this when i want to set the interval and it calls the interval function above
function audioRingingStartFunction() {
    $('.audio-blinking').toggleClass('blinking');
}
// i call this when i want to stop the interval
function audioRingingStopFunction() {
    clearAllIntervals();
    $('.audio-blinking').removeClass('blinking');
}

It's ugly but for my purposes it works.

score 1 · Answer 8 · answered Apr 20 '18 at 10:45

This worked for me.

//Setting interval
var startInterval = setInterval(function () {
 //interval code here
}, 1000);

//Clearing interval
var countInterval = startInterval != undefined ? startInterval : 0;

 for (var a = 0; a < countInterval; a++) {
  clearInterval(a);
 }

score 0 · Answer 9 · answered Jul 16 '22 at 09:17

Inserting this code will allow the use of clearAllInterval();. When clearAllInterval(); is executed, clearInterval is applied to all running setIntervals.

window.intervallib=[];
    window.clearAllInterval=function(){
        for(i=0;i<window.intervallib.length;i++){
        clearInterval(window.intervallib[i]);
        }
        window.intervallib=[];
    }
    window.oldSetInterval = window.setInterval;
    window.setInterval = function(func, interval) {
        var id=oldSetInterval(func, interval)
        window.intervallib.push(id);
        return id;
    }

How can I clearInterval() for all setInterval()?

9 Answers9

Linked

Related