JS Event Loop Step-by-Step Visualizer (Call Stack, Microtask, rAF, Macrotask & Idle)

Q: Why do Microtasks (Promise.then) always run before Macrotasks (setTimeout)?

Whenever the JavaScript Call Stack becomes empty, the runtime immediately performs a Microtask Checkpoint—draining every queued microtask (including newly spawned ones) until the Microtask Queue is completely empty before moving on to rendering or dequeuing a single macrotask.

Q: When do requestAnimationFrame and requestIdleCallback execute?

requestAnimationFrame runs right before the browser repaints the screen (typically every 16.6ms on a 60Hz display), whereas requestIdleCallback runs only during idle periods at the end of a frame when both microtask and macrotask queues are empty.

Interactive state-machine sandbox visualizing JavaScript Call Stack, Promise Microtasks, requestAnimationFrame, setTimeout Macrotasks, and requestIdleCallback execution order.

💡

Loading Rust Wasm Event Loop Engine...

📜 JavaScript Source ExecutionLine #1

function slowAction() {
  console.log('执行栈：慢操作执行开始');
  requestIdleCallback(() => {
    console.log('执行栈：requestIdleCallback');
  });
  setTimeout(() => {
    console.log('执行栈：setTimeout');
  }, 0);
  requestAnimationFrame(() => {
    console.log('执行栈：requestAnimationFrame');
  });
  Promise.resolve().then(() => {
    console.log('执行栈：Promise');
  });
  for (let i = 0; i < 100000; i++) {} // 同步耗时阻塞
  console.log('执行栈：慢操作执行结束');
}
slowAction();

🖥️ Console Output (Execution Order)0 logs

// Waiting for console.log execution...

🥞 Call Stack (LIFO - Single Thread)Immediate Execution

[Empty — Checking Queues]

🚄 Microtask Queue (FIFO - High Priority)Priority #1

[Queue Empty]

🎨 Animation Frame Callbacks (rAF)Before Repaint

[Queue Empty]

🚂 Macrotask Queue (FIFO - setTimeout / I/O)Priority #2

[Queue Empty]

☕ Idle Callbacks (requestIdleCallback)Lowest Priority

[Queue Empty]

💡 Recommended Developer Resources & Cost SaversPartner Links · Zero Extra Cost to You

🚀 Serverless JS RuntimeV8 Isolates at the Edge

Cloudflare Workers — Run JS/Wasm Globally in <1ms

Deploy event-driven JavaScript and Rust WebAssembly workloads across 300+ global edge locations.

Try Cloudflare Workers Free →

🔥 25% Exclusive Rebate25% Off First Purchase

Alibaba Cloud · 25% Exclusive Discount Campaign

Creator subsidies 20% commission + platform 5% rebate = 25% exclusive discount for new users on ECS cloud servers, OSS, and Model Studio.

Claim 25% Off Voucher →

🔥 Unified LLM API GatewayFree Credits Included

SiliconFlow & OpenRouter — 100+ LLMs via One OpenAI-Compatible Key

Access DeepSeek-R1, Claude 3.7, GPT-4o, and Qwen with high concurrency and automatic prompt caching.

Claim Free API Credits →

Mastering the JavaScript Event Loop: 5-Queue Step-by-Step Execution

Step through synchronous stack execution, microtask checkpoints, animation frames, macrotasks, and idle callbacks to see the exact order of console.log outputs in real time.

Frequently Asked Questions (FAQ)

Q1 Why do Microtasks (Promise.then) always run before Macrotasks (setTimeout)?

Whenever the JavaScript Call Stack becomes empty, the runtime immediately performs a Microtask Checkpoint—draining every queued microtask (including newly spawned ones) until the Microtask Queue is completely empty before moving on to rendering or dequeuing a single macrotask.

Q2 When do requestAnimationFrame and requestIdleCallback execute?

requestAnimationFrame runs right before the browser repaints the screen (typically every 16.6ms on a 60Hz display), whereas requestIdleCallback runs only during idle periods at the end of a frame when both microtask and macrotask queues are empty.