async.viz
playground

Type code. Watch it run.

Write JavaScript using console.log, setTimeout, Promise.then chains, fetch, async/await, and your own functions. Hit Run to see exactly how the event loop schedules each piece — then hit Share to send the link.

Source

frame 1 / 20
1console.log("1");
2setTimeout(() => {
3  console.log("2 from timer");
4}, 0);
5console.log("3");
Console
// no output yet
Program starts. The call stack is empty and the event loop is idle.
Call Stack
0
empty

Where JS executes — LIFO frames.

Heap
0
empty

Memory for objects, closures, functions.

Web APIs
0
empty

Browser-managed: timers, fetch, DOM events.

Microtask Queue
0
empty

Promise.then / queueMicrotask — drained first.

Task Queue
0
empty

setTimeout / I/O callbacks waiting.

speed
supported syntax
  • console.log("...") — prints to the virtual console
  • const / let / var name = … — variable declarations
  • function name() { ... } + name() — declarations and calls push real stack frames
  • async function name() { ... } / await expr — suspends as a microtask
  • setTimeout(() => { ... }, ms) — schedules a task
  • Promise.resolve().then(...).then(...) — chained microtasks
  • fetch("url").then(...) — web API + promise resolution
  • queueMicrotask(() => { ... }) — schedules a microtask
  • try { ... } catch (e) { ... } — runs the try block