JavaScript 计时器详解

在 JavaScript 中，计时器可用于一些常见的操作，如延迟某个函数执行、定期执行某个函数，或者对函数的执行进行监控。JavaScript 提供了 setTimeout() 和 setInterval() 两个函数来实现这些操作。

setTimeout()

setTimeout() 可以在指定的时间之后执行一个函数。其语法如下：

setTimeout(func|code, delay);

其中，func|code 表示要执行的函数或者要执行的 JavaScript 代码。delay 表示延迟的毫秒数，即在多长时间之后执行该函数。

示例：

function sayHello() {
  console.log("Hello World!");
}

setTimeout(sayHello, 1000);

上述代码表示，1 秒钟之后，控制台会输出 "Hello World!"。

setInterval()

setInterval() 可以定期执行一个函数。其语法如下：

setInterval(func|code, delay);

其中，func|code 和 delay 的含义和 setTimeout() 相同。

示例：

let count = 0;
function countUp() {
  count++;
  console.log(count);
}

setInterval(countUp, 1000);

上述代码表示，每隔 1 秒钟，控制台会输出一个数字，表示从程序启动到现在经过了多少秒。

清除计时器

如果希望在执行 setTimeout() 或 setInterval() 后再取消计时器，可以使用 clearTimeout() 和 clearInterval() 两个函数来取消。

clearTimeout() 可以取消由 setTimeout() 启动的计时器，而 clearInterval() 可以取消由 setInterval() 启动的计时器。

语法：

clearTimeout(timer);
clearInterval(timer);

其中，timer 表示要取消的计时器变量。

示例：

let timer = setTimeout(function() {
  console.log("Hello World!");
}, 1000);
clearTimeout(timer);

上述代码表示，尽管 setTimeout() 已经启动了一个计时器，但是由于立即使用 clearTimeout() 取消了该计时器，因此不会输出 "Hello World!"。

结论

通过本文的介绍，我们学习了 JavaScript 中计时器的基本使用方法，包括 setTimeout() 和 setInterval() 的实现方法和语法，以及如何使用 clearTimeout() 和 clearInterval() 来取消计时器。这些基本用法在实际的 Web 开发中，经常被用于一些常见的场景，比如异步请求、轮询、动画等等。