JavaScript是單線程，但處理異步操作而沒有阻止事件循環(huán)和回調(diào)隊列。 1）呼叫堆棧按順序執(zhí)行功能。 2）Web API處理異步任務(wù)，例如計時器和HTTP請求。 3）完成異步回調(diào)轉(zhuǎn)到Macrotask隊列（例如SettieMout）或Microtask隊列（例如，Promise..then）。 4）事件循環(huán)檢查呼叫堆棧是否為空，然後優(yōu)先考慮Microtasks通過宏觀掩飾。 5）即使有0ms延遲，Settimeout回調(diào)也要等到清除堆棧和Microtask隊列，這就是為什麼在settimeout在Promise中運行的Console.log（“ 2”）的原因。該機制可確保非阻滯行為，同時保持執(zhí)行順序可預(yù)測性。

JavaScript是單線程，這意味著它一次只能做一件事情。但是我們都知道，JavaScript可以處理諸如setTimeout ，HTTP請求和用戶交互之類的異步操作，而無需冷凍瀏覽器。事件循環(huán)和回調(diào)隊列（也稱為任務(wù)隊列）使這種魔術(shù)成為可能。讓我們簡單地將其分解。

事件循環(huán)如何保持JavaScript非阻滯

運行JavaScript代碼時，它會以特定的順序執(zhí)行。但是，當異步操作起作用（例如setTimeout或fetch ）時，它們不會阻止其餘的代碼。以下是：

1. 調(diào)用堆棧- 這是執(zhí)行功能的地方。這是一個堆棧數(shù)據(jù)結(jié)構(gòu)：最後，首先。
2. Web API - 這些由瀏覽器（不是JavaScript本身的一部分）提供，並處理計時器，HTTP請求，DOM事件等。
3. 回調(diào)隊列（任務(wù)隊列） - 當異步操作完成（例如， setTimeout計時器端）時，其回調(diào)將在此處放置，等待執(zhí)行。
4. 事件循環(huán)- 這會不斷檢查呼叫堆棧是否為空。如果是這樣，它將第一個回調(diào)從隊列推到堆棧上。

關(guān)鍵規(guī)則：事件循環(huán)僅在堆棧完全空時將回調(diào)從隊列移至堆棧。

說明流程的示例

console.log（“ 1”）;

settimeout（（）=> {
  console.log（“ 2”）;
}，0）;

console.log（“ 3”）;

您可能希望這會打印1但實際上是3 2 ：

 1
3
2

為什麼：

• 立即記錄"1" （調(diào)用堆棧）。
• setTimeout被稱為 - 瀏覽器在Web API中啟動了0ms計時器。
• 接下來將"3"記錄，因為它是同步的。
• 只有在整個主腳本完成後，事件循環(huán)才會檢查回調(diào)隊列。
• 計時器完成（幾乎立即），因此其回調(diào)為隊列。
• 現(xiàn)在，隨著堆棧為空，事件循環(huán)拾取了回調(diào)和日誌"2" 。

因此，即使有0ms延遲， setTimeout回調(diào)也必須等待當前執(zhí)行完成。

Microtasks vs Macrotasks：優(yōu)先級隊列

並非所有回調(diào)都得到平等對待。 JavaScript區(qū)分：

• MACROTAKSS - setTimeout ， setInterval ， setImmediate ，I/O，UI渲染。
• Microtasks - Promise.then/catch/finally ， queueMicrotask ， MutationObserver 。

微型箱具有較高的優(yōu)先級。在每個宏大後，事件循環(huán)都會運行所有微型掩飾，然後再返回宏ask隊列。

諾言的例子

console.log（“ 1”）;

settimeout（（）=> {
  console.log（“ 2”）;
}，0）;

Promise.resolve（）。然後（（）=> {
  console.log（“ 3”）;
}）;

console.log（“ 4”）;

輸出：

 1
4
3
2

為什麼？

• 立即1和4日誌。
• Promise.then然後回調(diào)進入MicroTask隊列。
• 在主腳本之後，事件循環(huán)處理所有微型施法- 因此2之前3日誌。
• 然後它移至大托克隊列並記錄2 。

此優(yōu)先系統(tǒng)意味著微型掩飾可以延遲大牙齒術(shù)，這對於性能和可預(yù)測性很重要。

關(guān)鍵要點

• JavaScript是單線線程，但是瀏覽器的Web API在幕後操作。
• 事件循環(huán)監(jiān)視呼叫堆棧和回調(diào)隊列。
• 從setTimeout ， setInterval和類似的回調(diào)轉(zhuǎn)到macrotask隊列。
• 諾言和queueMicrotask轉(zhuǎn)到微型施加隊列，該隊列在下一個大雄桿菌之前進行了處理。
• 回調(diào)隊列中的任何內(nèi)容都沒有運行，直到呼叫堆棧為空。

了解此流程有助於解釋為什麼異步代碼的行為方式，以及為什麼無法真正使用setTimeout(..., 0) “暫停” JavaScript。

基本上，這不是魔術(shù) - 這是事件循環(huán)完成工作。

以上是了解JavaScript事件循環(huán)和回調(diào)隊列的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！