前端事件循环（Event Loop）详解-小龙资源网

📌 温馨提示：
本文内容可能随时间变动而失效，请以页面显示的更新时间为准。
若内容已不准确或资源失效，欢迎留言或联系站长反馈修正。

⚠️ 免责声明：
本文仅供学习与参考，观点仅代表作者个人意见，与本站无关。
如有侵权问题，请立即联系我们处理，谢谢理解与支持。

前端事件循环（Event Loop）是JavaScript实现异步编程的核心机制，它负责协调执行各种任务，确保代码的有序运行。以下是对它的详细解释：

执行栈与任务队列

- 执行栈：也叫调用栈，是一种后进先出的数据结构。当函数被调用时，会被压入执行栈，执行完毕后从栈中弹出。例如，在下面的代码中，func1 调用 func2，func2 被压入栈顶执行，执行完后弹出，接着 func1 继续执行并弹出：

function func1() {
  console.log('func1 start');
  func2();
  console.log('func1 end');
}

function func2() {
  console.log('func2');
}

func1();

- 任务队列：用于存放待执行的任务。任务分为宏任务（Macrotask）和微任务（Microtask）。常见的宏任务有 setTimeout、setInterval、I/O 操作、UI 渲染等；常见的微任务有 Promise 的回调、MutationObserver 等。

事件循环的过程

1. 执行同步代码：JavaScript 引擎首先会执行执行栈中的同步代码，从上到下依次执行。

1. 处理宏任务：当执行栈为空时，事件循环会从宏任务队列中取出一个宏任务执行。执行完后，再检查微任务队列。

1. 处理微任务：将微任务队列中的所有微任务依次执行完毕。在微任务执行过程中，如果又产生了新的微任务，会将其加入队列继续执行。只有当微任务队列为空时，才会再次去宏任务队列中取任务。

1. 循环往复：不断重复上述步骤，形成一个无限循环，这就是事件循环。

示例

以下是一个简单的示例来演示事件循环：

console.log('start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('end');

在这个例子中，首先输出 start 和 end，因为它们是同步代码。然后，setTimeout 是宏任务，被放入宏任务队列；Promise 的回调是微任务，被放入微任务队列。当执行栈为空时，先执行微任务队列中的 Promise 回调，输出 Promise，最后执行宏任务队列中的 setTimeout 回调，输出 setTimeout。