掌握 JavaScript 中的 `setTimeout` 和 `setInterval`

在繁忙的 JavaScript 世界中，时间管理是关键。想象一下，您正在开发一个动态 Web 应用程序，并且需要在一定时间后执行某个函数，或者以指定的时间间隔重复运行某个函数。这就是 setTimeout 和 setInterval 发挥作用的地方。这两个函数允许开发人员控制代码执行的时间，使 Web 应用程序更具交互性和响应能力。在本博客中，我们将深入探讨 setTimeout 和 setInterval，通过引人入胜的示例探索它们的用法，并讨论如何与它们一起使用 async/await。

setTimeout 的基础知识

什么是setTimeout？

setTimeout 是一个 JavaScript 函数，用于设置计时器，一旦计时器到期，该计时器就会执行函数或指定的代码段。它是管理异步操作的基本工具。

setTimeout 的语法

setTimeout(function, delay, arg1, arg2, ...);

• function: 定时器到期后执行的函数。
• 延迟：函数执行之前的时间（以毫秒为单位）。
• arg1, arg2, ...：传递给函数的附加参数。

示例：一个简单的 setTimeout

让我们从一个简单的例子开始。想象一下您正在做饭，需要提醒在 5 秒内检查烤箱。

function checkOven() {
    console.log("Time to check the oven!");
}

setTimeout(checkOven, 5000); // 5000 milliseconds = 5 seconds

在此示例中，checkOven 函数将在 5 秒后执行一次。

setInterval 的基础知识

什么是设置间隔？

setInterval 是一个 JavaScript 函数，它设置一个计时器，该计时器重复执行一个函数或指定的代码段，每次调用之间有固定的时间延迟。

setInterval 的语法

setInterval(function, delay, arg1, arg2, ...);

• function：要重复执行的函数。
• 延迟：每个函数执行之间的时间（以毫秒为单位）。
• arg1, arg2, ...：传递给函数的附加参数。

示例：一个简单的 setInterval

让我们增强我们的烹饪场景。假设你需要每 2 秒搅拌一次汤。

function stirSoup() {
    console.log("Stirring the soup...");
}

setInterval(stirSoup, 2000); // 2000 milliseconds = 2 seconds

在此示例中，stirSoup 函数将每 2 秒执行一次。

清除定时器

清除超时

要停止执行 setTimeout，请使用clearTimeout。

let timerId = setTimeout(checkOven, 5000);

// Cancel the timer
clearTimeout(timerId);

清除间隔

要阻止 setInterval 重复，请使用clearInterval。

let intervalId = setInterval(stirSoup, 2000);

// Cancel the interval
clearInterval(intervalId);

高级用法与示例

将参数传递给函数

setTimeout 和 setInterval 都可以向正在执行的函数传递参数。

function greet(name) {
    console.log(`Hello, ${name}!`);
}

setTimeout(greet, 3000, "Alice"); // Outputs "Hello, Alice!" after 3 seconds

用于重复任务的嵌套 setTimeout

除了使用 setInterval 之外，您还可以使用嵌套的 setTimeout 来更精确地控制重复任务。

function fetchData() {
    console.log("Fetching data...");

    setTimeout(fetchData, 2000); // Recursively call fetchData every 2 seconds
}

fetchData();

故事：数字厨房计时器

想象一下您正在构建一个数字厨房计时器应用程序。用户可以为不同的烹饪任务设置多个计时器。使用setTimeout和setInterval，您可以有效地管理这些计时器。

class KitchenTimer {
    constructor() {
        this.timers = [];
    }

    addTimer(name, duration) {
        let timerId = setTimeout(() => {
            console.log(`${name} timer done!`);
            this.removeTimer(timerId);
        }, duration);

        this.timers.push({ name, timerId });
        console.log(`${name} timer set for ${duration / 1000} seconds.`);
    }

    removeTimer(timerId) {
        this.timers = this.timers.filter(timer => timer.timerId !== timerId);
    }

    clearAllTimers() {
        this.timers.forEach(timer => clearTimeout(timer.timerId));
        this.timers = [];
        console.log("All timers cleared.");
    }
}

let myKitchen = new KitchenTimer();
myKitchen.addTimer("Pasta", 5000);
myKitchen.addTimer("Cake", 10000);

setTimeout(() => {
    myKitchen.clearAllTimers();
}, 8000); // Clear all timers after 8 seconds

将 async 和 wait 与 setTimeout 结合使用

虽然 setTimeout 不是基于 Promise 的函数，但您可以通过将其包装在 Promise 中来将其与 async 和 wait 一起使用。

示例：将 setTimeout 包装在 Promise 中

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncTask() {
    console.log("Task started...");
    await delay(2000);
    console.log("Task completed after 2 seconds.");
}

asyncTask();

在此示例中，延迟函数返回一个在指定延迟后解析的 Promise。 asyncTask 函数使用await 暂停执行，直到promise 解决。

将 async 和 wait 与 setInterval 结合使用

使用 async 和 wait 处理 setInterval 更加复杂，因为它需要一种方法来重复等待延迟。

示例：使用 async 和 wait 模拟 setInterval

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncIntervalTask() {
    while (true) {
        console.log("Interval task executing...");
        await delay(2000);
    }
}

asyncIntervalTask();

在此示例中，asyncIntervalTask​​ 函数通过使用 while 循环和延迟函数上的 wait 来模拟重复任务。

结论

理解和掌握 setTimeout 和 setInterval 对于任何 JavaScript 开发人员来说都是至关重要的。这些函数提供了管理应用程序中的定时和异步操作的强大方法。通过利用它们的功能，您可以创建更具交互性和动态的 Web 体验。此外，通过将它们与 async 和 wait 集成，您可以在异步代码中实现更多控制和清晰度。

无论您是构建数字厨房计时器还是任何其他需要精确计时的应用程序，setTimeout 和 setInterval 都是 JavaScript 工具包中的必备工具。快乐编码！

以上是掌握 JavaScript 中的 `setTimeout` 和 `setInterval`的详细内容。更多信息请关注PHP中文网其他相关文章！