JavaScript 定时器关键点及使用场景解析
作者：天行无忌
正文
JavaScript 定时器是实现循环行为甚至触发延迟操作的好功能。无论有什么基于时间的逻辑，定时器都可以提供支持。在 JavaScript 中有两个定时器函数：setTimeout 和 setInterval 。接下来看看有哪些定时器以及它们是如何工作的。
关于计时器的关键点
在深入了解定时器的具体细节之前，有几个非常关键的点需要记住。
并不完全准确
定时器要么在一定秒数后触发一个动作，要么在每次指定的超时结束时重复一个动作。但是，尽管期望可能是它们精确到秒，但事实并非如此。
这些计时器的规范声明它们将使用时间参数（如指定的秒数）作为最短等待时间。但如果还有其他任务需要先完成，它们肯定会花费更长的时间。
只有当你逻辑依赖于精确的时间测量时，这才会成为问题，比如让时钟通过 setInterval 回调来计算秒数。
异步函数
这意味着它们在完成之前不会停止程序流。即使指定 0 作为超时值，它们的行为仍然是异步的。
这意味着这些函数会将对想要触发的函数的引用添加到事件循环中，所以即使在超时值上指定了 0，引用也会在接下来发生的所有事情之后排队。
setTimeout
setTimeout 函数可能是最容易理解的函数，因为主要目标是在几秒后触发一个函数，只会执行一次。
这个函数参数如下：
- 要执行的函数引用：这是时间一到就会触发的代码逻辑。
- 函数执行前的等待的秒数
- 然后所有其他参数以相同的顺序传递给执行的函数。
下面的代码将在 3 秒后打印 Hello World：
setTimeout(console.log, 3000, "Hello", "World");
等效于以下代码：
setTimeout(
(strHello, strWorld) => {
console.log(strHello, strWorld);
},
3000,
"Hello",
"World"
);
setTimeout 是一种特殊类型的异步函数，因此无论在其后编写什么代码，都将在触发该函数之前执行，如下：
console.log("执行了第 1 行代码");
setTimeout(() => {
console.log("执行了第 3 行代码");
}, 1000);
console.log("执行了第 5 行代码");
console.log("执行了第 6 行代码");
setTimeout(function () {
console.log("执行了第 8 行代码");
}, 0);
console.log("执行了第 10 行代码");
输出的结果如下：
执行了第 1 行代码
执行了第 5 行代码
执行了第 6 行代码
执行了第 10 行代码
执行了第 8 行代码
执行了第 3 行代码
请注意第 3 行和第 8 行是如何最后执行的，即使第 8 行的超时为 0。
在讨论 setTimeout 之前，如果设置超时值然后意识到必须停止它会发生什么？可以定义一个变量保存 setTimeout 的返回值（计时器 ID），则可以使用 clearTimeout 函数在超时之前停止计时器。
console.log("执行了第 1 行代码");
const timerId = setTimeout(() => {
console.log("执行了第 3 行代码");
}, 1000);
console.log("执行了第 5 行代码");
clearTimeout(timerId);
console.log("执行了第 6 行代码");
setTimeout(function () {
console.log("执行了第 8 行代码");
}, 0);
console.log("执行了第 10 行代码");
执行结果如下，少了一个定时器的输出：
执行了第 1 行代码
执行了第 5 行代码
执行了第 6 行代码
执行了第 10 行代码
执行了第 8 行代码
setInterval
setInterval 函数与 setTimeout 非常相似，但它不是只触发一次函数，而是一直触发函数直到停止。
此函数的签名与 setInterval 函数的签名完全相同，所有参数的也相同。
const names = ["刘备", "关羽", "张飞", "赵云", "黄忠"];
function sayHi(list) {
let name = list[Math.round(Math.random() * 10) % 4];
console.log("你好！", name);
}
console.log("蜀汉五虎将");
const intervalID = setInterval(sayHi, 1000, names);
setTimeout(() => {
clearTimeout(intervalID);
}, 4000);
上面的代码将启动一个每 1 秒触发一次的循环，当它触发时，将选择一个随机名称并打印字符串 你好！ <name>。设置了 4 秒的超时时间，通过调用 clearTimeout 函数来结束无限循环。当然，也可以使用 clearInterval 函数，但由于它们使用相同的计时器池，可以互换使用它们。
区别
setTimeout 仅触发一次表达式，而 setInterval 在给定的时间间隔后保持定期触发表达式（除非手动终止）。
使用场合
除了执行定时操作，结合 Promise 方法，结合 setTimeout 可以实现休眠功能。
const sleep = (ms) => {
return new Promise((resolve) => setTimeout(resolve, ms));
};
const asyncFoo = async () => {
await sleep(2000);
console.log(" 等待2秒输出");
await sleep(1000);
console.log(" 等待1秒输出");
};
console.log("开始执行");
asyncFoo();
Promise 结合 setInterval 可以实现一些数据的最大检测次数，如某个数据通过API验证，验证结果无法给出正常结果，超过一定次数提示错误。
const fakeApiCheck = async () => {
console.log("检查中...");
return Math.random() > 0.8;
};
const asyncInterval = async (callback, ms, triesLeft = 5) => {
return new Promise((resolve, reject) => {
const interval = setInterval(async () => {
if (await callback()) {
resolve();
clearInterval(interval);
} else if (triesLeft <= 1) {
reject();
clearInterval(interval);
}
triesLeft--;
}, ms);
});
};
const dataCheck = async () => {
try {
await asyncInterval(fakeApiCheck, 500);
} catch (e) {
console.log("验证错误");
}
console.log("验证完成！");
};
dataCheck();
总结
计时器是生成重复或延迟行为的绝佳函数，它们非常有用，尤其是当必须在某些基于时间的条件下与其他服务进行交互时。超时和间隔都可以在使用 clearInterval 或者 clearTimeout 函数触发之前强制停止。
以上就是JavaScript 定时器关键点及使用场景解析的详细内容，更多关于JavaScript 定时器的资料请关注脚本之家其它相关文章！