JavaScript 事件循环可视化
可视化 JavaScript 事件循环，包含调用栈、任务队列和微任务队列。交互式理解异步执行。
console.log("Start");
setTimeout(() => {
console.log("setTimeout");
}, 0);
Promise.resolve().then(() => {
console.log("Promise");
});
console.log("End");慢快
空闲调用栈
（空）
Web APIs / 定时器
（空）
微任务队列
（空）
任务队列（宏任务）
（空）
（空）
调用栈
微任务队列
任务队列（宏任务）
Web APIs / 定时器
控制台输出
理解 JavaScript 事件循环
JavaScript 事件循环是处理异步操作的机制。它持续检查调用栈和队列以确定下一步执行什么代码。setTimeout 回调进入任务队列（宏任务），而 Promise 回调进入微任务队列，微任务优先级更高。
核心概念
- 调用栈首先执行同步代码（后进先出顺序）
- 微任务（Promise）始终在宏任务（setTimeout）之前运行
- 每个宏任务之后都会执行所有待处理的微任务
- 只有当调用栈为空时，事件循环才检查队列
- setTimeout 等 Web API 在主线程之外运行
常见问题
相关工具
How to Use
- Enter or paste your data in the input field
- Configure any options if available
- Click the action button to process
- Copy the result to your clipboard
Use Cases
- Development and debugging workflows
- Data format conversion
- Code generation and formatting
- Quick calculations and validation