JavaScript 定时器关键点及使用场景解析

时间:2023-02-03 天行无忌人气:0

正文

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

加载全部内容