关于 JavaScript 定时器

2023-01-30
广东
本文字数：2378 字
阅读完需：约 8 分钟

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 函数触发之前强制停止。

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/33539cec897cefb0440817b1b】。

devpoint

关注

细节的追求者 2011-11-12 加入

专注前端开发，用技术创造价值！

发布

暂无评论

创作场景

关于 JavaScript 定时器

关于计时器的关键点

它们并不完全准确

它们是异步函数

setTimeout

setInterval

区别

使用场合

总结

devpoint

评论