JavaScript 程式札記 : 定時器 setTimeout 與 setInterval

JavaScript 定時器

寫程式時，有時候會需要在某個特定的時間後執行某段程式碼，或者是每隔一段固定的時間重複執行某段程式碼。這時候，JavaScript 提供了兩個非常有用的定時器：setTimeout 和 setInterval，這兩個定時器可以幫助我們輕鬆地控制時間和程式的執行。

setTimeout：設定延遲執行

setTimeout 是可以讓你在指定的時間之後執行某段程式碼的方法，它的基本用法非常簡單，只要給它兩個參數：一個是你想要執行的程式碼，另一個是延遲的時間（單位是毫秒）。

setTimeout(function() {
    console.log("這段訊息會在3秒後顯示");
}, 3000);

在這個範例程式中，使用 setTimeout 來設定一個3秒的延遲，當這3秒過去之後，它就會執行裡面的console.log，在控制台上打印出訊息。

setInterval：設定重複執行

與 setTimeout 不同，setInterval 是用來每隔一段固定的時間就重複執行某段程式碼，它的用法和 setTimeout 很像，也是需要兩個參數：一個是要執行的程式碼，另一個是間隔的時間。

let count = 0;
const intervalTest = setInterval(function() {
    count++;
    console.log("這是第" + count + "次執行");
    if (count >= 5) {
        clearInterval(intervalTest);
    }
}, 1000);

在這個範例程式中，每隔1秒，setInterval 就會執行裡面的程式碼，並在控制台上打印出訊息，當執行5次之後，我們使用 clearInterval 方法來停止這個重複的動作。

停止 setTimeout 和 setInterval

有時候，我們會想要在 setTimeout 或 setInterval 執行之前停止它，JavaScript 則提供了 clearTimeout 和 clearInterval 兩個方法來做到這一點。

停止 setTimeout

使用 clearTimeout 來停止 setTimeout，只需要將之前 setTimeout 的返回值傳入 clearTimeout 就可以了。

const timeoutTest = setTimeout(function() {
    console.log("這段訊息不會被顯示");
}, 3000);

clearTimeout(timeoutTest);

在這個範例程式中，設定了一個3秒後執行的 setTimeout，但是隨後立即使用 clearTimeout 將其停止，所以內部的程式碼不會被執行。

停止 setInterval

使用 clearInterval 來停止 setInterval，就像 clearTimeout 一樣，你只需要將 setInterval 的返回值傳入 clearInterval。

let count = 0;
const intervalTest = setInterval(function() {
    count++;
    console.log("這是第" + count + "次執行");
    if (count >= 5) {
        clearInterval(intervalTest);
        console.log("定時器停止囉!");
    }
}, 1000);

在這個範例程式中，我設定了一個每秒執行一次的 setInterval，當它執行5次之後，使用 clearInterval 停止它。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡