Surya JS Journey

Learn JavaScript through concepts, code, and guided practice.

A focused workspace for concept study, interactive examples, visual explanations, and challenge solving.

Event Loop Visualizer

Step through how JavaScript processes the call stack and queues.

This guided simulator shows when synchronous work runs, how promise callbacks enter the microtask queue, and why timer callbacks wait in the macrotask queue. Use it alongside the event loop concept page to build stronger intuition.

Scenarios

3

Learning Mode

Manual stepping, autoplay, and queue-by-queue explanation.

Best Paired With

Promise, async/await, and event loop concept pages.

Scenario

Promise vs setTimeout

See how synchronous code runs first, promise callbacks enter the microtask queue, and timers wait in the macrotask queue.

Total Steps

7

Peak Microtasks

1

Peak Macrotasks

1

promise-vs-timeout.jsScenario code
console.log("start");

setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("promise"));

console.log("end");

Current Step

Initial script evaluation

The main script enters the call stack. No queued tasks have run yet.

Call Stack

global()

Microtask Queue

Empty

Macrotask Queue

Empty

Reading Guide

Call Stack

Shows what is executing right now. JavaScript handles one active stack of work at a time.

Microtask Queue

Promise callbacks and async resumptions run here before timers are allowed to continue.

Macrotask Queue

Timers and similar callbacks wait here until the call stack clears and microtasks finish.

Console Output0 lines
No output yet.

Continue Learning

Want the concept explanation too? Open the event loop concept and compare the visualizer with the runnable example.

Open Event Loop ConceptPractice in Playground