Rendering happens between tasks, not during them
The first button freezes for over a second and you only ever see Step 3. The second shows each step, because the browser can paint between tasks.
The event loop is the rule that decides what runs next: finish the current code until the call stack is empty, run every microtask (promise callbacks), let the browser paint if it's time, then take the next task (a timer, a click) and repeat.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Predict the output, then check it in a live example:
console.log("a"); setTimeout(() => console.log("b"), 0); Promise.resolve().then(() => console.log("c")).then(() => console.log("d")); console.log("e");
Write code that prints sync, micro, task in that order, using one of each mechanism, with the lines written in the order task, micro, sync.
Explain it without notes
Explain the event loop: call stack, task queue, microtask queue and rendering.
What is the difference between a task and a microtask? Name examples of each.
Predict and explain: setTimeout(() => log(1)); Promise.resolve().then(() => log(2)); log(3);.
How can microtasks freeze a page, and why can't the user see DOM changes during a long task?
Preview
Console
Nothing logged yet.