setTimeout(..., ) 在 JavaScript 中的真正意義是什麼？（事件循環解釋！）-js教程-PHP中文網

首頁

web前端

js教程

setTimeout(..., ) 在 JavaScript 中的真正意義是什麼？（事件循環解釋！）

Dec 15, 2024 am 04:07 AM

What Does setTimeout(..., ) Really Mean in JavaScript? (Event Loop Explained!)

setTimeout(..., 0ms) 在 JavaScript 中的真正意義是什麼？（事件循環解釋！）

好吧，讓我們用 0ms 來分解整個 setTimeout 的事情。乍一看，你可能會想，「兄弟，0ms 意味著它會立即運行，對嗎？」但 JavaScript 有它自己的氛圍，0 毫秒並不像你想像的那麼即時。讓我們一起來解決這個問題。

代碼：

這是我們正在剖析的程式碼：

const promise = new Promise((resolve, reject) =&gt; {
  console.log(1); 
  setTimeout(() =&gt; { 
    console.log("timerStart");
    resolve("success"); 
    console.log("timerEnd");
  }, 0); 
  console.log(2); 
});

promise.then((res) =&gt; {
  console.log(res); 
})

console.log(4);

登入後複製

輸出呢？

1  
2  
4  
timerStart  
success  
timerEnd

登入後複製

大問題：0ms 發生了什麼事？

當你看到setTimeout(() => { ... }, 0) 的時候，感覺裡面的程式碼會在0ms後立即運行。但不，JavaScript 就像是，「兄弟，我有自己的系統，等你了！」

JavaScript 的系統：事件循環

JavaScript 不僅僅直接運行程式碼，它還有一個名為 事件循環 的很酷的系統來處理任務。像這樣想：

主要任務（同步）:

像 console.log() 這樣的東西首先運行。這些都是直接的、面對面的任務。
微任務（Promise）:

接下來是承諾，甚至在計時器之前。就像他們有一張 VIP 票一樣。
任務佇列（計時器，如 setTimeout）:

計時器位於生產線的後面，僅在微任務完成後運行。即使你給它 0ms，它也會等待。

分解代碼

讓我們一步步看看發生了什麼事：

已建立承諾：
- console.log(1) 立即運行。
- setTimeout(() => { ... }, 0) 被加到任務佇列。
- console.log(2) 立即運行。
Promise .then():
- .then() 回呼被加入到 微任務佇列。
console.log(4):
- 直接執行，因為它是主腳本的一部分。
微任務運作（VIP）：
- promise 得到解決，因此 .then() 回調記錄「成功」。
任務佇列運行：
- setTimeout 回呼終於輪到了：記錄「timerStart」和「timerEnd」。