JS 清除定时器|极客笔记

JS 清除定时器

在JavaScript中，我们经常会使用定时器来实现定时执行某些操作。但是有时候我们需要在特定的条件下取消或清除定时器。本文将详细讨论如何清除定时器，包括使用clearTimeout函数和clearInterval函数。

clearTimeout函数

clearTimeout函数用于取消由setTimeout创建的定时器。其语法如下：

clearTimeout(timer);

其中timer是由setTimeout返回的定时器ID。以下是一个简单的示例，演示如何使用clearTimeout取消定时器：

// 创建一个定时器，每隔一秒输出一次hello
const timer = setTimeout(() => {
  console.log("hello");
}, 1000);

// 2秒后取消定时器
setTimeout(() => {
  clearTimeout(timer);
  console.log("定时器已取消");
}, 2000);

运行上述代码后，定时器将在第二次调用setTimeout时被取消，控制台将输出：

hello
定时器已取消

clearInterval函数

除了setTimeout和clearTimeout之外，JavaScript还提供了setInterval和clearInterval函数用于创建和取消间隔定时器。clearInterval函数的语法与clearTimeout类似：

clearInterval(timer);

其中timer是由setInterval返回的定时器ID。以下是一个使用setInterval和clearInterval的示例：

let count = 0;

// 创建一个每秒输出一次count的间隔定时器
const timer = setInterval(() => {
  count++;
  console.log(count);
}, 1000);

// 5秒后取消定时器
setTimeout(() => {
  clearInterval(timer);
  console.log("定时器已取消");
}, 5000);

运行上述代码后，间隔定时器将在第二次调用setTimeout时被取消，控制台将输出：