JS清除所有定时器

发布时间：2023-05-22

一、定时器是什么

在介绍定时器清除之前，我们先来了解一下定时器。定时器就是一种在指定时间后会自动执行某个函数的机制，它有两种类型：setTimeout 和 setInterval。 setTimeout 是按照设定的时间只执行一次的定时器，而 setInterval 是每隔一段时间就会执行一次的定时器。

二、定时器带来的问题

在一些情况下，我们需要使用定时器来实现某些动态效果，但是如果定时器没有被清除，它会一直存在于内存中，这就会导致一些问题。 比如，如果一个页面使用了很多定时器，那么这些定时器会不断地运行，从而导致页面变慢，或者甚至直接导致浏览器崩溃。 此外，如果一个页面中有很多定时器，而又没有任何清除机制，那么当我们关闭或者刷新页面时，这些定时器依然会继续运行，从而浪费系统资源。

三、清除单个定时器

在 JavaScript 中，可以使用 clearTimeout 和 clearInterval 方法来清除单个定时器。当我们需要在设定的时间之前或之后停止定时器时，可以通过以下方式实现：

// clearTimeout语法
var timeoutID = window.setTimeout(func, delay);
window.clearTimeout(timeoutID);
// clearInterval语法
var intervalID = window.setInterval(func, delay);
window.clearInterval(intervalID);

四、清除所有定时器

有时候我们需要一次性清除所有的定时器，这个时候可以使用一个数组来存储所有的定时器 ID，然后遍历数组，逐一清除所有的定时器。以下是一个实现的示例：

var timerList = [];
function setTimeoutWrapper(callback, delay) {
  var timerId = setTimeout(() => {
      timerList = timerList.filter(id => id !== timerId);
      callback();
  }, delay);
  timerList.push(timerId);
  return timerId;
}
function setIntervalWrapper(callback, delay) {
    var timerId = setInterval(callback, delay);
    timerList.push(timerId);
    return timerId;
}
function clearAllTimeout() {
    for (var i = 0; i < timerList.length; i++) {
        clearTimeout(timerList[i]);
    }
    timerList = [];
}
function clearAllInterval() {
    for (var i = 0; i < timerList.length; i++) {
        clearInterval(timerList[i]);
    }
    timerList = [];
}
//调用clearAllTimeout或clearAllInterval即可清除所有定时器

五、利用类封装清除所有定时器

为了更好地维护定时器，我们可以利用类的方式来实现对所有定时器的管理。以下是一个利用类来封装清除所有定时器的示例：

class Timer {
    constructor() {
        this.timers = [];
    }
    setTimeout(callback, delay) {
        var timerId = setTimeout(() => {
            this.timers = this.timers.filter(id => id !== timerId);
            callback();
        }, delay);
        this.timers.push(timerId);
        return timerId;
    }
    setInterval(callback, delay) {
        var timerId = setInterval(callback, delay);
        this.timers.push(timerId);
        return timerId;
    }
    clearAllTimeout() {
        for (var i = 0; i < this.timers.length; i++) {
            clearTimeout(this.timers[i]);
        }
        this.timers = [];
    }
    clearAllInterval() {
        for (var i = 0; i < this.timers.length; i++) {
            clearInterval(this.timers[i]);
        }
        this.timers = [];
    }
}
//调用方式
var timer = new Timer();
timer.setTimeout(() => {
    console.log('setTimeout');
}, 10000);
timer.setInterval(() => {
    console.log('setInterval');
}, 1000);
timer.clearAllTimeout();
timer.clearAllInterval();

六、小结

在编写 JavaScript 程序时，定时器是一个非常常见的工具。但是，如果没有合理地管理定时器，就会导致一些问题。通过本文我们了解到了清除单个定时器和清除所有定时器的方法，并且还通过一个类的方式来封装了对所有定时器的管理，方便我们更好地维护代码。

推荐文章