事件循环——JavaScript

事件循环是维护 JavaScript 代码执行顺序（处理异步操作而不阻塞主线程）的循环。

在深入事件循环之前需要了解的事情：

1. 调用堆栈：这是 JavaScript 执行代码的地方。它遵循后进先出 (LIFO) 结构。当调用函数时，会创建一个新的执行上下文并将其推入堆栈。当功能结束时，它会弹出。
2. MicroTasks 队列：专用于 queueMicroTask 方法、Promise 处理程序、await 的特殊队列 回调和MutationObserver（接口提供了监视 DOM 树所做更改的能力）。
3. MacroTasks 队列：来自 Web API 的所有其他回调 (setTimeout、setInterval、DOM API, fetch）进入宏任务队列。

什么是事件循环？

这是一个无限循环，等待任务并将其推送到调用堆栈中执行。由于 JavaScript 是单线程的，它会维护一个执行顺序来根据优先级处理同步异步操作。

1. 常规 JS 代码： 同步代码首先运行并填充调用堆栈。
2. MicroTasks： 在 microTasks 队列中排队的任务被执行。
3. MacroTasks： 在 MacroTasks 队列中排队的任务被执行。

// 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

假设我们有 2 个队列 microTasks 和 macroTasks。当代码开始执行时，

1. ()=> console.log(1) 在 2000 毫秒内被推入 macroTasks 队列。
2. ()=> { 控制台.log(2); queueMicroTask(() => console.log(3)); }) 被推入 microTasks 队列。
3. ()=> { 控制台.log(4); setTimeout(() => console.log(5)); }) 被推入 microTasks 队列。
4. ()=> console.log(6) 在 0 毫秒内被推入 macroTasks 队列。
5. console.log(7) 执行并在控制台中打印 7。
6. 现在事件循环检查 microTasks 队列中的任务并采取 () =>; { 控制台.log(2); queueMicroTask(() => console.log(3)); }) 任务并在控制台中打印 2 并推送 () =>; console.log(3) 进入 microTasks 队列。
7. 接下来，事件循环检查 microTasks 队列并采取 () =>; { 控制台.log(4); setTimeout(() => console.log(5)); }) 任务并打印 4 并推送 () => console.log(5) 在 0 毫秒内写入 macroTasks 队列。
8. 事件循环再次检查microTasks队列并采取() =>; console.log(3)) 任务并在控制台中打印 3。
9. 由于 microTasks 队列现在为空，事件循环检查 MacroTaskQueue 并采取 () =>; console.log(6) 并在控制台中打印 6。
10. 事件循环执行下一个任务 () =>确保 microTasks 队列中没有任何任务后，从 macroTasks 中输出 console.log(5) 并在控制台中打印 5 .
11. 事件循环执行下一个任务 () =>来自 macroTasks 的 console.log(1) 并在控制台中打印 1。

感谢您的阅读！我希望您觉得这个博客内容丰富且引人入胜。如果您发现任何不准确之处或有任何反馈，请随时告诉我。

以上是事件循环——JavaScript的详细内容。更多信息请关注PHP中文网其他相关文章！