《JavaScript 事件循环（Event Loop）：从游乐场到源码》

✅ 特点：

• 生动比喻 + 代码解析 + 面试真题
• 适合前端初学者和面试准备者

---

JavaScript 事件循环（Event Loop）：从游乐场到源码

“同步先玩，微任务插队，宏任务排队”
一句话带你彻底搞懂 JS 异步执行机制！

---

🌟 前言

你是否曾困惑：

• 为什么 setTimeout(fn, 0) 不是立即执行？
• 为什么 Promise.then 比 setTimeout 先执行？
• 点击事件、定时器、网络请求，JS 是怎么“同时”处理的？

这一切的背后，就是 JavaScript 的核心机制——事件循环（Event Loop）。

今天，我们不用复杂术语，用一个“JS游乐场”的故事，带你轻松掌握事件循环！

---

🎪 一、JS游乐场：单线程的快乐与烦恼

JavaScript 是单线程的，就像一个游乐场只有一个工作人员：

• 他一次只能服务一个游客（执行一个任务）
• 如果你在过山车上尖叫10秒，其他人就得等10秒

这就是同步任务的阻塞问题。

---

🔁 二、事件循环：游乐场的“调度管理员”

为了让游客不干等，JS 引入了：

组件	作用
调用栈（Call Stack）	当前正在执行的任务
任务队列（Task Queue）	等待执行的异步任务
事件循环（Event Loop）	不停检查：调用栈空了吗？空了就从队列取任务

---

⏱️ 三、宏任务 vs 微任务：普通排队 vs VIP通道

1. 宏任务（Macrotask）

• 每次只执行一个
• 常见：setTimeout、setInterval、onclick、I/O

2. 微任务（Microtask）

• 当前“轮次”结束后立刻全部执行
• 常见：Promise.then、async/await、MutationObserver

💡 口诀：“同步先玩，微任务插队，宏任务排队”

---

🧩 四、经典面试题实战

console.log('1');

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

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

console.log('4');

输出顺序是？

答案：1 → 4 → 3 → 2

解析：

1. 同步：1、4
2. 同步结束 → 清空微任务：3
3. 取宏任务：2

---

🚀 五、总结

执行顺序	类型
同步代码	立即执行
微任务	同步结束后立刻执行（全清）
宏任务	一轮只执行一个，再清微任务

掌握事件循环，你就掌握了 JavaScript 的“心跳”！