事件循環(huán)是維護(hù) JavaScript 程式碼執(zhí)行順序（處理非同步操作而不阻塞主執(zhí)行緒）的循環(huán)。

在深入事件循環(huán)之前需要了解的事情：

1. 呼叫堆疊：這是 JavaScript 執(zhí)行程式碼的地方。它遵循後進(jìn)先出 (LIFO) 結(jié)構(gòu)。當(dāng)呼叫函數(shù)時(shí)，會(huì)建立一個(gè)新的執(zhí)行上下文並將其推入堆疊。當(dāng)功能結(jié)束時(shí)，它會(huì)彈出。
2. MicroTasks 隊(duì)列：專用於queueMicroTask 方法、Promise 處理程序、特殊隊(duì)列回呼和MutationObserver（介面提供了監(jiān)視 DOM 樹(shù)所做變更的能力）。 MacroTasks 隊(duì)列：來(lái)自Web API 的所有其他回調(diào)(
3. setTimeout、setInterval、DOM API , fetch）進(jìn)入巨集任務(wù)佇列。
什麼是事件循環(huán)？

這是一個(gè)無(wú)限循環(huán)，等待任務(wù)並將其推送到呼叫堆疊中執(zhí)行。由於 JavaScript 是單執(zhí)行緒的，它會(huì)維護(hù)一個(gè)執(zhí)行順序來(lái)根據(jù)優(yōu)先權(quán)處理同步非同步操作。

常規(guī) JS 程式碼：
1. 同步程式碼首先運(yùn)行並填入呼叫堆疊。
MicroTasks：
2. 在 microTasks 佇列中排隊(duì)的任務(wù)被執(zhí)行。
MacroTasks：
3. 在 MacroTasks 佇列中排隊(duì)的任務(wù)被執(zhí)行。

// Programmatic way of how the event loop processes tasks
while (true) {
  // Step 1: Execute tasks in the call stack
  while (!callStack.isEmpty()) {
    const currentTask = callStack.pop();
    currentTask(); // Executes the task
  }
  // Step 2: Process all microtasks
  while (!microTasksQueue.isEmpty()) {
    const microTask = microTasksQueue.shift();
    callStack.push(microTask); // Push microtask to call stack for execution
  }
  // Step 3: Process one macrotask if available
  if (!macroTasksQueue.isEmpty()) {
    const macroTask = macroTasksQueue.shift();
    callStack.push(macroTask); // Push macrotask to call stack for execution
  }
  // Break if there's nothing left to process
  if (callStack.isEmpty() && microTasksQueue.isEmpty() && macroTasksQueue.isEmpty()) {
    break;
  }
}

1.  setTimeout(() => console.log(1), 2000);
2.  Promise.resolve().then(() => {
3.      console.log(2);
4.      queueMicroTask(() => console.log(3));
5.  });
6.  Promise.resolve().then(() => {
7.      console.log(4);
8.      setTimeout(() => console.log(5));
9.  });
10. setTimeout(() => console.log(6));
11. console.log(7);

// 7 2 4 3 6 5 1

microTasks 和 macroTasks。當(dāng)程式碼開(kāi)始執(zhí)行時(shí)，

1. ()=> console.log(1) 在 2000 毫秒內(nèi)被推入 macroTasks 佇列。
2. ()=> { 控制臺(tái).log(2); queueMicroTask(() => console.log(3)); }) 被推入 microTasks 佇列。
3. ()=> { 控制臺(tái).log(4); setTimeout(() => console.log(5)); }) 被推入 microTasks 佇列。
4. ()=> console.log(6) 在 0 毫秒內(nèi)被推入 macroTasks 佇列。
5. console.log(7) 執(zhí)行並在控制臺(tái)中列印 7。
6. 現(xiàn)在事件循環(huán)檢查microTasks 佇列中的任務(wù)並採(cǎi)取() =>; { 控制臺(tái).log(2); queueMicroTask(() => console.log( 3)); }) 任務(wù)並在控制臺(tái)中列印2 並推送() =>; console.log(3) 進(jìn)入microTasks 隊(duì)列。
7. 接下來(lái)，事件循環(huán)檢查microTasks 隊(duì)列並採(cǎi)取() =>; { 控制臺(tái).log(4); setTimeout(() => console.log(5 )); }) 任務(wù)並列印4 並推送() => console.log(5) 在0 毫秒內(nèi)寫(xiě)入macroTasks 隊(duì)列。
8. 事件循環(huán)再次檢查microTasks佇列並採(cǎi)取() =>; console.log(3)) 任務(wù)並在控制臺(tái)中列印 3。
9. 由於 microTasks 佇列現(xiàn)在為空，事件循環(huán)檢查 MacroTaskQueue 並採(cǎi)取 () =>; console.log(6) 並在控制臺(tái)中列印 6。
10. 事件循環(huán)執(zhí)行下一個(gè)任務(wù)() =>確保microTasks 佇列中沒(méi)有任何任務(wù)後，從macroTasks 中輸出console.log(5) 並在控制臺(tái)中列印5 .
11. 事件循環(huán)執(zhí)行下一個(gè)任務(wù) () =>來(lái)自 macroTasks 的 console.log(1) 並在控制臺(tái)中列印 1。

以上是事件循環(huán)——JavaScript的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！