如何清除所有間隔？

Question

我在用

varName = setInterval(function() { ... }, 1000);

在我正在編寫的 jquery 插件中設置幾個間隔，但是當重新加載插件時，我需要清除這些間隔。 我嘗試將它們存儲在變量中，如下所示：

(function($){
$.mosaicSlider = function(el) {
    var base = this;        
    var transitionInterval, mainInterval;

...

base.init = function() {
    mainInterval = setInverval(function() { ... }, 1000);
}

base.grid = function() {
    this.transition() = function() {
         transitionInterval = setInterval(function(...) {
    }
}

base.init();

我嘗試在 base.init() 函數中取消這些間隔，如下所示：

clearInterval(transitionInterval);
clearInterval(mainInterval);

像這樣：

window.oldSetInterval = window.setInterval;
window.setInterval = new function(func, interval) {  }

Answer 1

將它們存儲在一個對象中。 由於您是唯一創建這些間隔的人，並且您知道它們是什么，因此您可以存儲它們，然后根據需要隨意處理它們。 我會為此專門創建一個對象，例如：

var interval = {
    // to keep a reference to all the intervals
    intervals : new Set(),
    
    // create another interval
    make(...args) {
        var newInterval = setInterval(...args);
        this.intervals.add(newInterval);
        return newInterval;
    },

    // clear a single interval
    clear(id) {
        this.intervals.delete(id);
        return clearInterval(id);
    },

    // clear all intervals
    clearAll() {
        for (var id of this.intervals) {
            this.clear(id);
        }
    }
};

你的第一個問題可能是

為什么要為此創建一個單獨的對象？

好吧，Watson，這是為了讓與您的插件/項目相關的手工間隔遠離窺探，這樣您就不會弄亂頁面中設置的與您的插件無關的其他間隔。

是的，但為什么我不能將它存儲在基礎對象中？

你當然可以，但我認為這種方式更干凈。 它將您在基地中執行的邏輯與奇怪的超時邏輯分開。

為什么將間隔存儲在Set而不是數組中？

更快的訪問和更簡潔的代碼。 你可以走哪條路，真的。

Answer 2

您可以通過創建一個“什么都不做”的新計時器（通過給它一個空函數來運行，計划在未來幾十年運行）來找到“最高”計時器標識符，然后清除 id 1 和該標識符之間的每個計時器，像這樣：

// Get a reference to the last interval + 1
const interval_id = window.setInterval(function(){}, Number.MAX_SAFE_INTEGER);

// Clear any timeout/interval up to that id
for (let i = 1; i < interval_id; i++) {
  window.clearInterval(i);
}

但是，請注意，這並不能保證有效：HTML 標准實際上並沒有規定如何分配超時/間隔標識符，因此假設我們將獲得對“最后一個間隔標識符 + 1”的引用的假設僅僅是：假設。 在這個答案的時候，對於大多數瀏覽器來說可能是正確的，但不能保證即使在同一瀏覽器的下一個版本中也會如此。

Answer 3

初始化 Timer 並將其設置為 window 對象。 Window.myInterval將保存計時器的 ID。

像window.myInterval = setInterval(function() { console.log('hi'); }, 1000);

要清除間隔，您可以這樣寫

if(window.myInterval != undefined && window.myInterval != 'undefined'){
    window.clearInterval(window.myInterval);
    alert('Timer cleared with id'+window.myInterval);
}

Answer 4

當你設置一個間隔時，你會得到一個指向它的指針。 要清除所有間隔，您需要存儲所有間隔：

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

Answer 5

這對我有用：

window.stop();