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

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

1. 調(diào)用堆棧：這是 JavaScript 執(zhí)行代碼的地方。它遵循后進(jìn)先出 (LIFO) 結(jié)構(gòu)。當(dāng)調(diào)用函數(shù)時(shí)，會(huì)創(chuàng)建一個(gè)新的執(zhí)行上下文并將其推入堆棧。當(dāng)功能結(jié)束時(shí)，它會(huì)彈出。
2. MicroTasks 隊(duì)列：專用于 queueMicroTask 方法、Promise 處理程序、await 的特殊隊(duì)列 回調(diào)和MutationObserver（接口提供了監(jiān)視 DOM 樹(shù)所做更改的能力）。
3. MacroTasks 隊(duì)列：來(lái)自 Web API 的所有其他回調(diào) (setTimeout、setInterval、DOM API, fetch）進(jìn)入宏任務(wù)隊(duì)列。

什么是事件循環(huán)？

這是一個(gè)無(wú)限循環(huán)，等待任務(wù)并將其推送到調(diào)用堆棧中執(zhí)行。由于 JavaScript 是單線程的，它會(huì)維護(hù)一個(gè)執(zhí)行順序來(lái)根據(jù)優(yōu)先級(jí)處理同步異步操作。

1. 常規(guī) JS 代碼： 同步代碼首先運(yùn)行并填充調(diào)用堆棧。
2. MicroTasks： 在 microTasks 隊(duì)列中排隊(duì)的任務(wù)被執(zhí)行。
3. MacroTasks： 在 MacroTasks 隊(duì)列中排隊(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;
  }
}

讓我們通過(guò)一個(gè)示例來(lái)更好地理解工作流程

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

假設(shè)我們有 2 個(gè)隊(duì)列 microTasks 和 macroTasks。當(dāng)代碼開(kāi)始執(zhí)行時(shí)，

1. ()=> console.log(1) 在 2000 毫秒內(nèi)被推入 macroTasks 隊(duì)列。
2. ()=> { 控制臺(tái).log(2); queueMicroTask(() => console.log(3)); }) 被推入 microTasks 隊(duì)列。
3. ()=> { 控制臺(tái).log(4); setTimeout(() => console.log(5)); }) 被推入 microTasks 隊(duì)列。
4. ()=> console.log(6) 在 0 毫秒內(nèi)被推入 macroTasks 隊(duì)列。
5. console.log(7) 執(zhí)行并在控制臺(tái)中打印 7。
6. 現(xiàn)在事件循環(huán)檢查 microTasks 隊(duì)列中的任務(wù)并采取 () =>; { 控制臺(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ì)列并采取 () =>; { 控制臺(tái).log(4); setTimeout(() => console.log(5)); }) 任務(wù)并打印 4 并推送 () => console.log(5) 在 0 毫秒內(nèi)寫(xiě)入 macroTasks 隊(duì)列。
8. 事件循環(huán)再次檢查microTasks隊(duì)列并采取() =>; console.log(3)) 任務(wù)并在控制臺(tái)中打印 3。
9. 由于 microTasks 隊(duì)列現(xiàn)在為空，事件循環(huán)檢查 MacroTaskQueue 并采取 () =>; console.log(6) 并在控制臺(tái)中打印 6。
10. 事件循環(huán)執(zhí)行下一個(gè)任務(wù) () =>確保 microTasks 隊(duì)列中沒(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。

感謝您的閱讀！我希望您覺(jué)得這個(gè)博客內(nèi)容豐富且引人入勝。如果您發(fā)現(xiàn)任何不準(zhǔn)確之處或有任何反饋，請(qǐng)隨時(shí)告訴我。

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