如何清除所有间隔？

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

您可以通过创建一个“不执行任何操作”的新计时器（通过为其运行一个空函数，计划在未来数十年运行）来找到“最高”计时器标识符，然后清除 ids 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 2

将它们存储在一个对象中。由于您是唯一进行这些间隔的人，并且您知道它们是什么，因此您可以存储它们，然后根据需要随意处理它们。我会创建一个专门用于此目的的对象，例如：

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 3

初始化Timer并将其设置为窗口对象。 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

对于 Node.js

如果不跟踪它们，就不可能清除所有间隔。因此，假设您想要执行清除操作以确保服务正常终止，或者在任何其他情况下您想要终止所有运行间隔。

解决方案

创建一个处理系统中所有setInterval的Singleton，并使用它来创建间隔，然后在必要时调用其clearAllIntervals方法，使之无效一次所有这些，无需单独跟踪它们。

单例实现（对 TS 的建议，在 JS 中只需删除类型）

class IntervalManager {
  private static instance: IntervalManager;
  private intervals: Set<NodeJS.Timeout>;

  private constructor() {
    this.intervals = new Set<NodeJS.Timeout>();
  }

  public static getInstance(): IntervalManager {
    if (!IntervalManager.instance) {
      IntervalManager.instance = new IntervalManager();
    }

    return IntervalManager.instance;
  }

  public setInterval(callback: () => void, delay: number): NodeJS.Timeout {
    const id = setInterval(callback, delay);
    this.intervals.add(id);
    return id;
  }

  public clearInterval(id: NodeJS.Timeout): void {
    clearInterval(id);
    this.intervals.delete(id);
  }

  public clearAllIntervals(): void {
    for (const id of this.intervals) {
      clearInterval(id);
    }
    this.intervals.clear();
  }
}

export default IntervalManager;

用法（可以在任何和多个文件中使用）

import IntervalManager from './IntervalManager';

const intervalManager = IntervalManager.getInstance();

// Set an interval
const id = intervalManager.setInterval(() => {
  console.log('Hello, world!');
}, 1000);

// Clear a specific interval
intervalManager.clearInterval(id);

// Set multiple intervals
intervalManager.setInterval(() => {
  console.log('Hello, world!');
}, 1000);

intervalManager.setInterval(() => {
  console.log('Hello again, world!');
}, 2000);

// Clear all intervals
intervalManager.clearAllIntervals();

Answer 6

这对我有用：

window.stop();