掌握 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中文網其他相關文章！