Why should you care?

Explains why promises run before setTimeout(0) and why long loops freeze the page.

See it live — copy this example

Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.

console.log("1");
setTimeout(() => console.log("2"), 0);
Promise.resolve().then(() => console.log("3"));
console.log("4");

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• Order: 1, 4, 3, 2.
• Sync first, then microtask (promise), then macrotask (timeout).

Practice next

1. Predict log order 1,4,3,2 then run the example.
2. Add another .then in the promise chain.
3. Insert a long sync loop and feel UI freeze.
4. Add queueMicrotask between setTimeout and Promise and predict new order.
5. Nest setTimeout inside a .then and trace two loop turns.

Remember

Single-threaded JS Microtasks before macrotasks Keep tasks small

ScriptVerse loading spinner

After fetch resolves, microtasks update state before the browser paints the spinner off — order matters for flicker-free UI.

Outcome: Event loop knowledge explains race conditions between data arrival and paint.