清除所有设置的Intervals

Question

我在

setIntervals

函数中使用

each()

，如下所示

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

    }, 1000);
});

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

我的问题是：当我不再需要所有 setIntervals 时，如何清除它们？我尝试将 setInterval 存储在变量中并调用

window.clearInterval(int)

，但这只会清除最后一个 setInterval，因为每个变量都被覆盖。

Answer 1

当您设置间隔时，您会得到一个指向它的指针：

var myInterval = setInterval(function(){}, 4000);

如果您想取消间隔，请执行以下操作：

clearInterval(myInterval); 

因此，对于您想做的事情，您将执行以下操作：

var intervals = [];
$(".elements").each(function() {
    var i = setInterval(function() {

    }, 1000);
    intervals.push(i);
});

如果您需要取消所有这些，您可以这样做：

intervals.forEach(clearInterval);

这应该适合你。

Answer 2

这对我有用：

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

Answer 3

没有“清除所有间隔”功能。

您需要存储所有这些，并清除所有它们：

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

Answer 4

有趣的是，间隔句柄 ID 是一个大于 0 的增量整数。因此，您所要做的就是创建一个无功能间隔，然后对其进行 for 循环以清除从最新间隔句柄 ID 开始的所有间隔到 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);

如果您运行该示例，您将看到我们在控制台中看到 2 个间隔正在运行，发出“间隔 A”和“间隔 B”，然后当您运行 for 循环时，它会停止这两个间隔。

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

如果你想与 IE8 或更低版本兼容，你应该 shim .forEach，或者用等效的库或普通循环替换它。

Answer 6

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

$(".elements").each(function() {
  $(this).data('interval-id', setInterval(function() {
    // ...
  }, 1000));
});

然后，如果您想清除间隔，

$(".elements").each(function() {
  clearInterval($(this).data('interval-id'));
});

Answer 7

我不建议您使用此解决方案，但它确实有效。重写 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)

为了做得更好，您还需要重写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)

Answer 8

当您设置间隔时，您会得到一个指向它的指针。
要清除所有间隔，您需要存储所有间隔：

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

以下循环将清除所有间隔

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