JavaScript 事件循环学习笔记（Demo）

Demo 说明：本文用于验证 Markdown、代码高亮与内容路由，不代表作者的真实发表记录。

理解事件循环，关键不是背诵一句“微任务先于宏任务”，而是先看清一轮执行中有哪些队列。

一个最小示例

console.log('A');

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

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

console.log('D');

输出顺序是 A → D → C → B。

1. 当前脚本作为一个任务执行，同步输出 A 与 D。
2. Promise 回调进入微任务队列。
3. setTimeout 回调进入后续任务队列。
4. 当前任务结束后，运行时先清空微任务，再进入下一轮任务。

为什么这件事重要

当界面更新、网络请求和状态变更交织在一起时，执行时机直接影响用户看到的结果。遇到“数据明明更新了，视图却慢一步”之类的问题，先画出任务顺序，往往比继续加日志更有效。

类型	常见来源	执行时机
同步代码	函数调用	当前调用栈
微任务	Promise、queueMicrotask	当前任务结束后
后续任务	setTimeout、事件回调	下一轮事件循环

小结

把异步代码拆成“当前栈—微任务—下一任务”三层，通常就能快速定位大多数时序问题。