初學者指南：深入了解 JavaScript 中的 setTimeout

更新日期： 2024 年 10 月 27 日

在 JavaScript 開發中，處理異步操作是一個重要的概念，而 setTimeout 是其中最常見的一個工具。

它允許你設置一個延遲，在指定的時間後執行某段程式碼。

對於新手來說，理解 setTimeout 的運作方式可以幫助你撰寫更加靈活、有效的程式碼。

本文將深入介紹 setTimeout 的概念、使用方法，以及它在開發中的應用。

什麼是 setTimeout？

setTimeout 是 JavaScript 中的一個內建函式，用於在指定的延遲時間後執行某段程式碼。

它非常適合用來實現延遲操作或模擬異步任務。

語法

setTimeout(function, delay);

• function：一段在延遲時間結束後要執行的程式碼，可以是一個函式或匿名函式。
• delay：延遲的時間，以毫秒為單位（1000 毫秒等於 1 秒）。

基本範例

setTimeout(function() {
  console.log("這是一個延遲執行的訊息");
}, 2000);

這段程式碼會在 2 秒（2000 毫秒）後輸出 "這是一個延遲執行的訊息"。

如何使用 setTimeout

延遲執行函式

最常見的用途是延遲某個函式的執行，讓它在指定的延遲後運行。

範例：

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

setTimeout(sayHello, 3000); // 3 秒後執行 sayHello 函式

這裡，sayHello 函式會在 3 秒後被執行，輸出 “Hello, world!”。

使用匿名函式

你也可以直接在 setTimeout 中撰寫匿名函式，而不需要事先定義。

範例：

setTimeout(function() {
  console.log("3 秒後的訊息");
}, 3000);

這樣可以讓程式碼更加簡潔，尤其是當這段程式碼只需要執行一次時。

取消 setTimeout

有時候你可能需要在定時器到達之前取消 setTimeout。

為此，你可以使用 clearTimeout 函式。

取消 setTimeout

當你呼叫 setTimeout 時，它會返回一個唯一的 ID。這個 ID 可以用來取消該定時器。

範例：

let timerId = setTimeout(function() {
  console.log("這段代碼不會被執行");
}, 5000);

clearTimeout(timerId); // 取消定時器

在這個例子中，我們通過 clearTimeout(timerId) 取消了 5 秒後的定時器，因此那段程式碼不會被執行。

setTimeout 是如何運作的？

非阻塞的異步行為

setTimeout 的運作方式是非阻塞的。

這意味著它不會阻止程式碼的執行。

在指定的延遲時間內，程式的其他部分會繼續運行，而不是等待定時器完成。

範例：

console.log("開始");

setTimeout(function() {
  console.log("3 秒後的訊息");
}, 3000);

console.log("結束");

輸出：

開始
結束
3 秒後的訊息

你會發現，儘管 setTimeout 設置了 3 秒延遲，但 console.log("結束") 會在 setTimeout 之前執行。這是因為 setTimeout 是異步的，它允許其他代碼在等待的過程中繼續執行。

事件循環（Event Loop）和 setTimeout

setTimeout 與 JavaScript 的事件循環（Event Loop）密切相關。

當一個定時器到達延遲時間後，setTimeout 的回調函式會被放入事件隊列，等待主執行線程（Call Stack）變空時，回調函式才會被執行。

應用範例

模擬延遲加載

setTimeout 可以用來模擬延遲加載某些資源或模擬網絡請求。

範例：

function loadData() {
  console.log("正在加載資料...");

  setTimeout(function() {
    console.log("資料加載完成！");
  }, 3000);
}

loadData();

這段程式碼模擬了一個資料加載的過程，3 秒後提示資料加載完成。

自動登出功能

setTimeout 可以應用於實現一些基於時間的功能，例如自動登出使用者。

範例：

function startSession() {
  console.log("使用者登入中...");

  setTimeout(function() {
    console.log("會話已過期，請重新登入");
  }, 60000); // 1 分鐘後自動登出
}

startSession();

在這裡，setTimeout 被用來在 1 分鐘後自動登出使用者。

setTimeout 的常見問題

延遲時間不是精確的

雖然 setTimeout 允許你指定延遲時間，但這個時間並不是完全精確的，特別是在處理密集的操作時，延遲可能會稍微超出預期時間。

範例：

setTimeout(function() {
  console.log("這段程式碼可能稍微延遲執行");
}, 100);

這是因為 JavaScript 的事件循環，會根據目前的工作負載，來安排回調函式的執行順序，因此延遲時間可能不是精確的。

setTimeout 與 setInterval

setTimeout 用於延遲執行某段程式碼一次，而如果你需要重複執行某段程式碼，可以使用 setInterval。它會在指定的間隔時間內不斷執行某段程式碼，直到被取消。

結語

setTimeout 是 JavaScript 中非常實用的工具，它允許你延遲某段程式碼的執行，從而實現異步操作。

通過掌握 setTimeout，你可以實現許多基於時間的功能，如模擬網絡請求、創建定時器等。

無論你是新手還是有經驗的開發者，setTimeout 都是你需要熟悉的基礎功能之一。

參考資料

• MDN Web Docs – setTimeout
• JavaScript.info – Timers: setTimeout and setInterval