Loading...
See how the JavaScript event loop works with an interactive visualization. Watch the call stack, microtask queue, and callback queue process setTimeout, Promises, and async/await step by step.
Loading visualization...
The JavaScript event loop coordinates synchronous code, microtasks, and macrotasks so one thread can handle many async workflows without blocking UI updates.
JavaScript in the browser runs on a single call stack for regular code execution. When async work is scheduled, JavaScript delegates that work to browser or runtime APIs and keeps executing other code.
The event loop continuously checks whether the call stack is empty. If it is empty, it first flushes the microtask queue, then takes the next macrotask, and repeats this cycle.
This model is why JavaScript can feel concurrent even though most user code is single-threaded. Understanding queue priority explains why Promise callbacks can run before setTimeout callbacks.
Interview framing: define Event Loop in one sentence, then explain one concrete runtime behavior and one common pitfall with a short code example.
setTimeout(0) still waits for the current call stack and queued microtasks to finish. It only runs when the loop reaches the macrotask queue.
Fix: Use queueMicrotask or Promise.resolve().then only when microtask priority is truly required.
Recursively scheduling microtasks can starve rendering and user input because the loop must drain microtasks before macrotasks and paint.
Fix: Break heavy work into chunks with macrotasks or requestAnimationFrame to keep the UI responsive.
Long loops or expensive parsing block the stack, so no queued callbacks or paint steps can run until the work completes.
Fix: Split heavy work, defer non-critical tasks, or move compute-heavy logic to Web Workers.
Common interview prompts with concise model answers.
Promise.then uses the microtask queue, which is drained before the event loop processes the next macrotask such as setTimeout.
console.log("A");
setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("microtask"));
console.log("B");
// Order: A, B, microtask, timeoutNo. The delay is a minimum threshold. Actual execution depends on call stack load, queue backlog, and timer clamping rules.
Use requestAnimationFrame for visual updates tied to painting. It aligns work with browser render timing for smoother animations.
No. async/await is syntax over Promises, so continuation after await still resumes through microtasks.
Continue with these concepts to strengthen your mental model.
console.log('Start'); setTimeout(() => { console.log('Timeout');}, 0); Promise.resolve() .then(() => { console.log('Promise 1'); }) .then(() => { console.log('Promise 2'); }); console.log('End');empty
empty
empty
empty
No output yet.