javascript 清除所有 setIntervals

Clear all setIntervals

提问by frosty

I'm using setIntervalswithin an each()function like so

我setIntervals在这样的each()函数中使用

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

    }, 1000);
});

Obviously a setIntervals is created for each element.

显然，为每个元素创建了一个 setIntervals。

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.

我的问题是：当我不再需要它们时，如何清除所有 setIntervals？我曾尝试将 setInterval 存储在一个变量中并调用window.clearInterval(int)，但这只会清除最后一个 setInterval ，因为每个变量都被覆盖了。

回答by frosty

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.

那应该为你做。

回答by Paul Roub

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

回答by Paul

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.

如果您希望与 IE8 或更低版本兼容，则应填充 .forEach，或将其替换为等效的库或普通循环。

回答by Oriol

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

由于每个间隔都与一个元素相关联，因此您可以在元素中存储间隔 ID：

$(".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'));
});

回答by Dmitry

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:

我不建议您使用此解决方案，但它确实可以解决问题。覆盖 setInterval 函数以收集所有指向 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:

为了做得更好，您还需要覆盖 clearInterval 以删除所有已清除的间隔：

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