javascript 进阶技巧：揭秘事件循环机制（Event Loop）

2023-12-25 01:19:38

事件循环机制（Event Loop）

JavaScript 中的事件循环机制是协调异步代码执行的核心。它是一个持续不断运行的循环，监视事件队列并依次执行事件。

事件队列

事件队列是一个先进先出（FIFO）队列，其中包含需要执行的事件。事件可以由用户交互（如单击或键盘事件）、网络请求、超时或 Promise 等异步操作触发。

宏任务和微任务

事件队列中的事件分为两类：宏任务和微任务。宏任务包括脚本、 setTimeout() 和 setInterval() 等任务。微任务包括 Promise、.then() 和 .catch() 处理程序以及 MutationObserver 回调等任务。

事件循环的工作原理

事件循环的运作过程如下：

执行栈: 循环首先执行栈中的代码。
检查事件队列: 栈清空后，循环会检查事件队列中是否有待处理的事件。
执行微任务: 循环执行队列中的所有微任务。
执行宏任务: 循环执行队列中的所有宏任务。
重复: 循环重复上述步骤，直到事件队列和栈都为空。

事件循环在异步编程中的应用

事件循环机制在异步编程中至关重要，它允许 JavaScript 在不阻塞主线程的情况下执行异步代码。通过将任务放入事件队列，浏览器可以继续执行其他任务，并在任务完成后执行这些任务。

理解事件循环的重要性

掌握事件循环机制至关重要，因为它：

揭示了 JavaScript 异步代码的执行顺序和优先级。
有助于优化代码性能，避免意外的行为。
理解事件循环是编写健壮且高效的异步 JavaScript 代码的基础。

示例：模拟事件循环

我们可以使用以下示例来模拟事件循环的行为：

const eventQueue = [];

function processEventQueue() {
  while (eventQueue.length > 0) {
    const event = eventQueue.shift();
    event.callback();
  }
}

function setTimeout(callback, delay) {
  eventQueue.push({
    callback: callback,
    delay: delay
  });
}

function microtask(callback) {
  eventQueue.push({
    callback: callback,
    delay: 0
  });
}

// 模拟事件循环
setTimeout(() => console.log("Macro task"), 1000);
microtask(() => console.log("Microtask"));
processEventQueue(); // 输出：Microtask