JavaScript 计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScript 中使用计时事件是很容易的，两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。

一、setTimeout

1. 功能

setTimeout 用于在指定的延迟后执行一次指定的函数。它可以用来实现延迟执行的需求，比如在某个操作后等待一段时间再执行下一步。

2. 语法

let timeoutId = setTimeout(callback, delay, arg1, arg2, ...);

• callback: 要执行的函数。
• delay: 延迟的时间，以毫秒为单位。
• arg1, arg2, …: 可选参数，这些参数会传递给回调函数。

3 示例

console.log("Start");

setTimeout(() => {
    console.log("This runs after 2 seconds");
}, 2000); // 延迟 2000 毫秒（2秒）

console.log("End");

输出:

Start
End
This runs after 2 seconds

在上述例子中，虽然 setTimeout 在最开始被调用，但它会在主线程完成当前的代码块后再执行。

4. 清除定时器

你可以使用 clearTimeout 来取消一个已经设置的定时器。

let timeoutId = setTimeout(() => {
    console.log("This will not run");
}, 2000);

clearTimeout(timeoutId); // 取消定时器

二、setInterval

1. 功能

setInterval 用于在指定的时间间隔内重复执行指定的函数。它适合于需要定期更新的场景，比如定时刷新数据或动画效果。

2. 语法

let intervalId = setInterval(callback, interval, arg1, arg2, ...);

• callback: 要执行的函数。
• interval: 以毫秒为单位的时间间隔。
• arg1, arg2, …: 可选参数，传递给回调函数。

3 示例

let count = 0;

const intervalId = setInterval(() => {
    count++;
    console.log(`Count: ${count}`);

    if (count >= 5) {
        clearInterval(intervalId); // 停止定时器
        console.log("Interval cleared");
    }
}, 1000); // 每秒执行一次

输出：

Count: 1
Count: 2
Count: 3
Count: 4
Count: 5
Interval cleared

在这个例子中，定时器每秒增加 count 并打印，直到 count 达到 5 时停止。

4. 清除定时器

使用 clearInterval 可以停止 setInterval 创建的定时器。

const intervalId = setInterval(() => {
    console.log("Repeating every second");
}, 1000);

// 当你想停止时：
clearInterval(intervalId);

三、注意事项

• 异步执行：setTimeout 和 setInterval 的回调是异步执行的，这意味着它们不会阻塞主线程。
• 时间精度：JavaScript 的计时器并不总是精确的，因为它受到事件循环和其他任务的影响。在高负载情况下可能会出现延迟。
• 闭包问题：在使用这两个函数时要注意闭包。如果在回调函数中访问外部变量，确保它们是你所期望的值。

let count = 0;
const timer = setInterval(() => {
    count++;
    console.log(count);
    if (count === 5) {
        clearInterval(timer);
    }
}, 1000);

• 最大延迟：setTimeout 和 setInterval 的最大延迟是 24.8 days，超过这个时间会被重置。

四、实际应用

1. 用户界面反馈：例如，在按钮点击后显示一个加载指示器，2 秒后隐藏。
2. 轮询请求：使用 setInterval 定期向服务器请求数据。
3. 动画效果：控制动画的帧率，例如每秒执行 60 次渲染。
4. 游戏开发：控制游戏状态的更新频率。

五 区别

1. 功能

• setTimeout: 用于在指定的延迟后执行一次指定的函数。它只会运行一次。
• setInterval: 用于按指定的时间间隔重复执行指定的函数。它会持续运行，直到被清除。

2 语法

setTimeout:

let timeoutId = setTimeout(callback, delay);

setInterval:

let intervalId = setInterval(callback, interval);

3. 调用次数

1. setTimeout: 仅在延迟结束后执行一次。
2. setInterval: 在每个间隔结束后执行，直到显式调用 clearInterval 停止它。

4 使用场景

setTimeout:

延迟执行某个操作。
实现一次性的延时效果，例如提示框、加载动画等。

setInterval:

定期更新数据或状态，例如轮询服务器、定时器等。
创建动画效果，如每秒更新画面。

5. 清除定时器

1. setTimeout: 使用 clearTimeout(timeoutId) 来取消定时器。
2. setInterval: 使用 clearInterval(intervalId) 来停止定时器。

setTimeout 示例

setTimeout(() => {
    console.log("Executed after 3 seconds");
}, 3000);

setInterval 示例

let count = 0;
const intervalId = setInterval(() => {
    console.log(`Count: ${count}`);
    count++;
    if (count === 5) {
        clearInterval(intervalId); // 停止定时器
    }
}, 1000);