在线工具箱
JavaScript · 运行时

JS 事件循环可视化

通过逐行解析执行顺序,可视化展示同步代码、微任务(Promise.then / queueMicrotask)与宏任务(setTimeout)的调度过程。

脚本代码

加载预设

解析说明

  • 逐行解析脚本:console.log / 同步语句为「同步」;setTimeout / setInterval / setImmediate 为「宏任务」;Promise.then / queueMicrotask 为「微任务」。
  • 执行顺序:先执行全部「同步」语句 → 同步执行完毕后清空「微任务队列」→ 取出下一个「宏任务」执行 → 重复。
  • 嵌套的 Promise.then / setTimeout 会在执行时被加入对应队列,等待后续取出。
同步微任务宏任务

控制台输出

// 等待执行…

执行状态

同步调用栈空闲
// 单步执行后将显示当前任务
微任务队列0 个待执行
// 空
宏任务队列0 个待执行
// 空
解析基于 ECMAScript 事件循环规范,覆盖 Promise / setTimeout / queueMicrotask 常见用法