JavaScript · 运行时
JS 事件循环可视化
通过逐行解析执行顺序,可视化展示同步代码、微任务(Promise.then / queueMicrotask)与宏任务(setTimeout)的调度过程。
脚本代码
加载预设
解析说明
- 逐行解析脚本:console.log / 同步语句为「同步」;setTimeout / setInterval / setImmediate 为「宏任务」;Promise.then / queueMicrotask 为「微任务」。
- 执行顺序:先执行全部「同步」语句 → 同步执行完毕后清空「微任务队列」→ 取出下一个「宏任务」执行 → 重复。
- 嵌套的 Promise.then / setTimeout 会在执行时被加入对应队列,等待后续取出。
同步微任务宏任务
控制台输出
// 等待执行…
执行状态
同步调用栈空闲
// 单步执行后将显示当前任务
微任务队列0 个待执行
// 空
宏任务队列0 个待执行
// 空
解析基于 ECMAScript 事件循环规范,覆盖 Promise / setTimeout / queueMicrotask 常见用法