JavaScript的事件循环机制是支撑其异步编程能力的核心，它解决了单线程语言执行耗时操作时的阻塞问题，让JS可以同时处理用户交互、网络请求、定时器等不同类型的任务。理解事件循环的运行逻辑，能帮你准确预判异步代码的执行顺序，避免写出逻辑不符合预期的代码。
事件循环的核心组成
事件循环的运行依赖三个核心部分，它们共同协作完成代码的执行调度：
- 调用栈（Call Stack）：用来存储当前正在执行的函数，遵循后进先出的原则，函数执行完成后会从栈中弹出。
- 任务队列（Task Queue）：存放等待执行的任务，分为宏任务队列和微任务队列两类。
- 事件循环（Event Loop）：不断检查调用栈是否为空，如果为空就从任务队列中取出任务放入调用栈执行。
宏任务与微任务的区别
任务队列中的任务分为宏任务（Macrotask）和微任务（Microtask），二者的执行优先级不同：
| 任务类型 | 常见示例 | 执行时机 |
|---|---|---|
| 宏任务 | script整体代码、setTimeout、setInterval、UI渲染、I/O操作 | 每次事件循环只执行一个宏任务，执行完成后会先检查微任务队列 |
| 微任务 | Promise.then/catch/finally、queueMicrotask、MutationObserver | 当前宏任务执行完成后，会一次性清空所有微任务，再执行下一个宏任务 |
事件循环的执行流程
一次完整的事件循环执行步骤如下：
- 先执行当前所有的同步代码（属于第一个宏任务）。
- 同步代码执行完成后，检查微任务队列，依次执行所有微任务，直到微任务队列清空。
- 从宏任务队列中取出下一个宏任务执行，重复步骤2的流程。
代码示例分析执行顺序
下面通过一段代码来实际验证事件循环的执行逻辑：
console.log('同步代码1'); // 同步代码，直接执行
setTimeout(() => {
console.log('setTimeout宏任务'); // 宏任务，放入宏任务队列
}, 0);
Promise.resolve().then(() => {
console.log('Promise微任务1'); // 微任务，放入微任务队列
}).then(() => {
console.log('Promise微任务2'); // 微任务，放入微任务队列
});
console.log('同步代码2'); // 同步代码，直接执行
这段代码的执行顺序是：
- 先执行同步代码，输出同步代码1、同步代码2。
- 同步代码执行完成，调用栈为空，开始执行微任务队列中的任务，依次输出Promise微任务1、Promise微任务2。
- 微任务队列清空后，从宏任务队列取出setTimeout的回调执行，输出setTimeout宏任务。
最终的输出结果为：
同步代码1 同步代码2 Promise微任务1 Promise微任务2 setTimeout宏任务
事件循环的实际应用场景
1. 优化异步代码的执行顺序
如果希望某个异步操作在当前同步代码执行完成后再执行，且优先级高于setTimeout等宏任务，可以使用微任务：
// 使用queueMicrotask添加微任务
console.log('同步开始');
queueMicrotask(() => {
console.log('微任务执行');
});
setTimeout(() => {
console.log('宏任务执行');
}, 0);
console.log('同步结束');
// 输出顺序：同步开始、同步结束、微任务执行、宏任务执行
2. 避免阻塞主线程
如果遇到耗时的大计算任务，不要直接放在同步代码中执行，否则会阻塞调用栈，导致页面卡顿。可以将大任务拆分成多个宏任务执行，让事件循环有机会处理其他任务：
function bigTask() {
const data = [];
// 拆分大任务，每次处理一部分
function run() {
for (let i = 0; i < 1000; i++) {
data.push(i);
}
if (data.length < 10000) {
// 剩余任务放到下一个宏任务执行
setTimeout(run, 0);
} else {
console.log('大任务执行完成');
}
}
run();
}
常见误区提醒
注意：Promise的构造函数中的代码是同步执行的，只有then/catch/finally中的回调才是微任务。
比如下面的代码：
console.log('开始');
new Promise((resolve) => {
console.log('Promise构造函数同步代码');
resolve();
}).then(() => {
console.log('Promise then微任务');
});
console.log('结束');
// 输出顺序：开始、Promise构造函数同步代码、结束、Promise then微任务
掌握事件循环机制后，你就能准确分析任何异步代码的执行顺序，也能更合理地安排异步任务的执行时机，写出更稳定的JavaScript代码。
JavaScriptEvent_Loop事件循环异步编程修改时间：2026-06-21 16:21:32