本文详细介绍JavaScript中的定时器机制，包括setInterval和setTimeout两种核心方法的使用、参数设置及返回值。重点讲解如何通过clearInterval和clearTimeout取消定时器，以及如何在浏览器控制台使用console.time进行性能测试，帮助开发者掌握定时器的正确用法与注意事项。
1、简单介绍
在JavaScript中，系统提供了两个主要的定时器方法： setInterval() 与setTimeout() ，它们各自拥有对应的取消定时器的方法。这些方法均属于window对象，因此在调用时可以直接省略window前缀。需要注意的是，这两个方法并不包含在JavaScript 的核心规范定义中。
与定时器相关的方法共有四种，具体功能如下所示：
| 方法 | 描述 |
|---|---|
| setInterval | 周期性地调用一个函数(function)或者执行一段代码。 |
| clearInterval | 取消掉用setInterval设置的重复执行动作。 |
| setTimeout | 在指定的延迟时间之后调用一个函数或者执行一个代码片段。 |
| clearTimeout | 方法可取消由 setTimeout() 方法设置的 timeout。 |
需要特别注意：（即setTimeout）仅执行一次；而（即setInterval）则是按照给定的时间间隔周期性执行。
2、setInterval
2.1 描述
setInterval() 方法允许按照指定的周期重复调用一个函数或执行一段代码段，周期单位通常为毫秒。如果setInterval() 方法未被clearInterval() 方法关闭，或者页面未关闭，该定时器将持续运行下去。setInterval接收多个参数：第一种情况，若第一个参数为代码字符串，则后续参数可选填；第二种情况，若第一个参数为函数，则setInterval可接受多个额外参数。
let timerId = setInterval(func|code, delay, arg1, arg2, ...)
2.2 参数
| 参数 | 必/选填 | 描述 |
|---|---|---|
| func | code | 必填 | 调用的函数后要执行的函数或代码字符串 |
| delay | 必填 | 执行代码前所需的时间，单位为毫秒，可以不填，默认值是 0 |
| arg1，arg2… | 选填 | 要传入被执行函数（或代码字符串）的参数列表（IE9 以下不支持） |
注意：参数func|code通常传入的是函数。尽管出于历史兼容性考虑，该方法支持传入代码字符串，但官方并不建议这种做法。
2.3 返回值
返回值timeoutID是一个正整数，代表定时器的唯一编号。该编号可用于传递给clearTimeout()，从而取消对应的定时器。
2.4 用法
以下示例演示了点击按钮后，每隔一秒数字自动加一的功能：
<p id="showNum"></p>
<button onclick="timer()">点我每秒钟数字加一</button>
<script>
const showNum = document.getElementById("showNum");
let timerId; // 计时器的ID
let num = 0;
function timer() {
timerId = setInterval(addNum, 1000);
}
function addNum() {
showNum.innerText = `${num++}`;
}
// 没有写停止计时器代码
</script>
3、setTimeout
3.1 描述
setTimeout()返回一个整数，即定时器的编号，后续可通过该编号取消定时器。setTimeout()允许我们将函数的执行推迟到指定的时间间隔之后。
let timerId = setTimeout(func|code, delay, arg1, arg2, ...)
3.2 参数
setTimeout()的参数设置与setInterval()的参数完全一致。
| 参数 | 必/选填 | 描述 |
|---|---|---|
| func | code | 必填 | 调用的函数后要执行的函数或代码字符串 |
| delay | 必填 | 执行代码前所需的时间，单位为毫秒，可以不填，默认值是 0 |
| arg1，arg2… | 选填 | 要传入被执行函数（或代码字符串）的参数列表（IE9 以下不支持） |
注意：参数func|code通常传入的是函数。尽管出于历史兼容性考虑，该方法支持传入代码字符串，但官方并不建议这种做法。
3.3 用法
setTimeout()的使用方式与 setInterval()相同，
区别在于setTimeout() 仅执行一次，而setInterval() 则是根据指定的时间间隔周期性执行。
<p id="showNum"></p>
<button onclick="timer()">点击后，等待一秒钟数字加一</button>
<script>
const showNum = document.getElementById("showNum");
let timerId;
let num = 0;
addNum();
function timer() {
timerId = setTimeout(addNum, 1000);
}
function addNum() {
showNum.innerText = `${num++}`;
}
</script>
4、取消timer
clearInterval() 方法用于取消由 setInterval() 设置的timer。clearTimeout() 方法用于取消由setTimeout() 设置的timer。
使用方法十分简单，仅需一个参数，即timeoutID，它代表要取消的定时器的标识符。该ID由相应的setTimeout()或clearTimeout()调用返回。
clearInterval(intervalID);
clearTimeout(timeoutID);
注意：setTimeout()和setInterval()共用一个编号池。从技术层面讲，clearTimeout()和clearInterval()可以互换使用。但为了避免代码混淆，建议不要混用取消定时器的函数。
用法示例如下：
function timer() {
timerId = setTimeout(addNum, 1000);
}
clearTimeout(timerId); // 当代码运行到这行的时候，会取消timer所设置的定时器。
5、在控制台使用定时器
在浏览器控制台中同样可以使用定时器功能。
console.time(timerName)
创建一个名为name的计时器，并开始计时。
注意：每一个计时器必须拥有唯一的名字，页面中最多能同时运行10,000个计时器。
console.timeEnd(timerName)
调用console.timeEnd(name)停止计时器并输出所耗时间（毫秒）。
console.time(timerName);
console.timeEnd(timerName);
5.1 用法
以下示例展示了执行99999次for循环所需的时间：
console.time(name);
let num;
for (let index = 0; index < 99999; index++) {
num++;
}
console.timeEnd(name);
到此这篇关于JavaScript 定时器 详情的文章就介绍到这了,更多相关JavaScript 定时器 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！