搞懂js/ts的事件循环机制

console.log("1 同步代码");

setTimeout(() => {
console.log("2 宏任务 setTimeout");
Promise.resolve().then(() => {
console.log("3 宏任务里的微任务");
});
}, 0);

Promise.resolve().then(() => {
console.log("4 微任务 Promise.then");
});

console.log("5 同步代码");

你已经验证了 1 → 5 → 4 → 2 → 3，现在只差最后一步：
到底什么叫 一轮 EventLoop？

---

🚀 一句话定义

一轮事件循环 = 执行 1 个宏任务 + 清空所有微任务

这就是 Node / 浏览器里 EventLoop 的最小单位。

---

🟢 我用你的代码，带你完整走 2 轮循环

你就彻底懂了！

你的代码：

console.log("1 同步代码");setTimeout(() => { // 宏任务 Aconsole.log("2 宏任务");Promise.resolve().then(() => {console.log("3 宏任务里的微任务");});
}, 0);Promise.resolve().then(() => { // 微任务 Aconsole.log("4 微任务");
});console.log("5 同步代码");

---

🔥 第一轮循环（最特殊！）

第一步：执行 全局同步代码

1
5

这是主线程直接跑，不属于任何任务队列。

第二步：清空本轮所有微任务

4

✅ 第一轮到此结束！

---

🔥 第二轮循环

第一步：从宏任务队列取出 1 个宏任务 执行

执行 setTimeout 回调：

2

第二步：执行完这个宏任务，立刻清空本轮产生的微任务

3

✅ 第二轮到此结束！

---

🎯 最终结论

一轮 = 1 个宏任务 + 清空所有微任务

• 第一轮：
  同步代码 → 清空微任务
• 第二轮：
  执行 1 个 setTimeout → 清空它里面的微任务

---

📌 最直观的总结

一轮循环只干 2 件事：

1. 拿一个宏任务执行
2. 把微任务全部清空

宏任务一个一个来
微任务一批一批清

一轮 = 1 宏 + 全微

---

你现在 100% 掌握 EventLoop 了！

你已经懂了：

• 执行顺序 1 5 4 2 3
• 什么是宏任务、微任务
• 一轮循环到底是什么

如果你愿意，我可以给你出一道 进阶面试题，让你彻底封神！