为什么需要事件循环？

单线程的困境

JavaScript 是单线程的——同一时间只能做一件事。

就像只有一个厨师的小餐厅：如果厨师做完一道菜才接下一单，客人等得头发都白了。

JavaScript 采用了异步回调的方式：点完单先去干别的，菜好了再叫你。怎么说呢，

事件循环就是“传唤员”

事件循环就像餐厅里的传唤员

• Kitchen做好菜后传唤员查看订单。喊“33号，你的菜好了”。按理说，
• 如果你正在吃饭。传唤员就等着，
• 轮到你的时候，你放下筷子，去取菜。

调用栈 — 厨师的工作台

代码是怎么“跑起来”的？

当你调用一个函数，这个函数就被放进调用栈里执行。

就像厨师在工作台上，一边做菜一边接新单。做完一单马上处理下一单：

function cooking {
console.log;fry，console.log;}
function fry {
console.log;console.log，老实说，console.log;}
cooking，

执行顺序的观点是，

调用栈:
- cooking 入栈
- console.log 入栈，执行，出栈
- fry 入栈
- fry 内的 console.log 一次一次执行
- fry 出栈
- console.log 入栈。执行，出栈
- cooking 出栈

调用栈的特点

• 后进先出 : 像叠盘子一样最终放进去的是最先拿出来。
• synchronous execution:- 每个函数必须完成后下一个才能进入。
• saturation risk:- 如果递归没有终止，会导致堆栈溢出并崩溃。

// 栈溢出示例
function recursive {
recursive;}
recursive，其实，// RangeError: Maximum call stack size exceeded

任务队列 — 取餐口

异步代码放哪儿？

Avoiding immediate execution is key—when you hit ,,or event listeners。y’re queued in a task queue instead of running straight away.

事件循环运行方式简述图示：

┌─────────────────────┐
│ 调用栈 │ ← 正在执行
└─────────────────────┘ ↓
┌─────────────────────┐
│ 任务队列 │ ← 等待执行
└─────────────────────┘ ↓
事件循环 “堆空了?按理说，好，就取下一个”

规则简化版：

1. Synchronous stack first.
2. If stack empty → take next task from queue.
3. The process repeats.

console.log;// sync
setTimeout => {
console.log;// macrotask after stack empty
},0);console.log，// sync
// Output:
//① →③ →②

微任务 vs 宏任务 — VIP和普通号区分法

两种不同类型的队列

类型	例子	优先级
宏任务	setTimeout / setInterval / I/O / UI 渲染	低优先级
微任务	Promise.n/catch/finally。MutationObserver,queueMicrotask	高优先级
相当于餐厅里的…，
'宏任务' = 普通取餐号，需要排队等待；'微任务' = VIP会员卡，一来直接拿到服务！说起来，'Promise 本身不是微任务。而是 Promise.n 的回调才是。'

注意点 👀 ： 微任务永远会比任何宏任务抢走主线程。于是 Promise.n 的回调往往比 setTimeout 更快！而 async/await 本质上也会把后续代码塞进微任务里所以看似同步其实是异步。

---

---

---

---

---

---

---

---

---

---

---

---

---

---