JavaScript计时器让您能够在指定时间执行代码，或以固定间隔重复执行。主要有两种计时器：setTimeout() 和 setInterval()。两者都用于安排代码在延迟后运行，但行为有所不同。
setTimeout()
setTimeout() 在指定的延迟后仅执行一次函数或代码块。
-
工作原理: 告诉JavaScript“等待一段时间后，再执行这段代码”。
-
语法:
<code class="javascript">setTimeout(function, delay, ...args);</code>
- 示例:
<code class="javascript">function sayHello() {
console.log("Hello, world!");
}
// 3秒后调用 sayHello() (3000毫秒)
setTimeout(sayHello, 3000);</code>
在这个例子中，sayHello 函数会在3秒后执行。setTimeout() 接受两个参数：
-
要执行的函数 (
sayHello)。 -
延迟时间，单位为毫秒 (3000毫秒 = 3秒)。
-
...args(可选): 传递给函数的其他参数。 -
要点:
-
非阻塞:
setTimeout()不会阻塞其他代码的执行。JavaScript在等待超时期间继续执行其他语句。 -
毫秒: 延迟以毫秒为单位，最小延迟为1毫秒。
-
单次执行: 回调函数只会在指定时间后调用一次。
setInterval()
setInterval() 以指定的间隔（毫秒）重复执行代码块或函数，直到手动停止。
-
工作原理: 告诉JavaScript“每隔一段时间就执行这段代码”。
-
语法: (语法与
setTimeout类似，只是功能不同) -
示例:
<code class="javascript">function sayHelloAgain() {
console.log("Hello again!");
}
// 每2秒调用 sayHelloAgain() (2000毫秒)
setInterval(sayHelloAgain, 2000);</code>
这里，setInterval() 内部的代码会每2秒执行一次。
-
要点:
-
非阻塞: 类似于
setTimeout()，setInterval()也是非阻塞的。浏览器在等待下一个间隔时继续执行其他任务。 -
重复执行: 与只执行一次的
setTimeout()不同，setInterval()会以指定间隔持续执行回调函数。 -
手动停止: 该函数会持续运行，直到使用
clearInterval()手动停止。
- 清除计时器
您可以使用 clearTimeout() 和 clearInterval() 来停止计时器。
- 停止
setTimeout()计时器:
如果想在执行前取消超时，可以使用 clearTimeout()：
<code class="javascript">function sayHello() {
console.log("Hello, world!");
}
const timeoutId = setTimeout(sayHello, 4000);
// 在执行前停止超时
clearTimeout(timeoutId);</code>
- 停止
setInterval()计时器:
<code class="javascript">const intervalId = setInterval(sayHello, 1000);
// 5秒后停止间隔
setTimeout(() => {
clearInterval(intervalId);
console.log("Interval timer stopped");
}, 5000);</code>
这里，我们首先启动一个每秒执行的间隔。然后，5秒后，我们使用 setTimeout() 和 clearInterval(intervalId) 来停止间隔。
关键概念总结:
-
setTimeout()：在指定的延迟后执行一次函数。 -
setInterval()：以指定的间隔重复执行函数。 -
clearTimeout()/clearInterval()：用于取消计时器。 - 异步特性: 计时器不会阻塞其他代码的执行；它们会被添加到事件队列中，并在调用堆栈为空时执行。
- 精度: 由于繁重的计算或浏览器限制等因素，计时器的精度无法保证。
