js 定时执行|极客笔记

js 定时执行

在前端开发中，经常会遇到需要定时执行某些操作的场景，比如轮播图自动播放、定时更新页面数据等。JavaScript提供了多种方式来实现定时执行，本文将详细介绍常用的定时执行方法，并给出示例代码。

1. setTimeout

setTimeout 是 JavaScript 提供的一种定时执行方法，它会在指定的时间间隔后执行一次指定的代码。setTimeout 接受两个参数，第一个参数是要执行的代码，第二个参数是延迟的毫秒数。

示例代码如下：

function sayHello() {
    console.log("Hello, world!");
}

setTimeout(sayHello, 2000);

上述代码定义了一个名为 sayHello 的函数，然后通过 setTimeout 方法在延迟 2000 毫秒后执行该函数。运行代码后，控制台将输出 “Hello, world!” 。

2. setInterval

与 setTimeout 不同，setInterval 方法会在指定的时间间隔内反复执行指定的代码。setInterval 同样接受两个参数，第一个参数是要执行的代码，第二个参数是时间间隔。

示例代码如下：

function printTime() {
    console.log(new Date());
}

setInterval(printTime, 1000);

上述代码定义了一个名为 printTime 的函数，然后通过 setInterval 方法每隔一秒钟执行一次该函数，输出当前时间。通过这种方式可以实现一些需要定时刷新的功能，比如实时更新页面信息。

3. clearTimeout 和 clearInterval

setTimeout 和 setInterval 方法都会返回一个值，可以通过该值来取消定时执行。clearTimeout 用于取消 setTimeout 的执行，clearInterval 用于取消 setInterval 的执行。

示例代码如下：

function greet() {
    console.log("Good morning!");
}

let timeoutId = setTimeout(greet, 5000);

// 取消定时执行
clearTimeout(timeoutId);

上述代码定义了一个名为 greet 的函数，然后通过 setTimeout 方法延迟 5000 毫秒后执行该函数，并将返回的 ID 存储在 timeoutId 变量中。最后通过 clearTimeout 方法取消定时执行。

4. 使用 `setTimeout` 模拟 `setInterval`

虽然 setInterval 可以实现定时执行的效果，但是存在一个问题：如果定时执行的代码需要一定时长才能执行完，可能会导致代码叠加执行，出现意外结果。为了避免这种情况，可以使用 setTimeout 来模拟 setInterval 的效果，确保每次执行完成后再次设置定时执行。

示例代码如下：

function countDown(seconds) {
    console.log(seconds);

    if (seconds > 0) {
        setTimeout(() => countDown(seconds - 1), 1000);
    }
}

countDown(5);

上述代码定义了一个名为 countDown 的函数，每隔一秒钟输出一个倒计时数字，直到计数为 0。在函数中通过 setTimeout 调用自身来实现递归调用，确保每次执行完成后再次设置定时执行。

结语

本文介绍了 JavaScript 中定时执行的常用方法 setTimeout 和 setInterval，并通过示例代码演示了它们的用法。同时，为了避免定时执行出现叠加执行的情况，还介绍了一个使用 setTimeout 来模拟 setInterval 的方法。通过合理使用定时执行，可以实现各种有趣的交互效果和功能。