JavaScript kører på en enkelt tråd, så det kan kun gøre én ting ad gangen. event loopen er det, der gør det muligt at håndtere asynkront arbejde uden blokkering: den kører call stacken, og når stacken er tom, trækker den callbacks fra kø'er.
Der er to køer med forskellige prioriteter:
- Microtasks: Promise callbacks (
.then),queueMicrotask. Drænet helt efter hver opgave, før rendering. - Macrotasks:
setTimeout, I/O, UI events. En behandles per loop iteration.
js
console.log("1"); // sync
setTimeout(() => console.log("2"), 0); // macrotask
Promise.resolve().then(() => console.log("3")); // microtask
console.log("4"); // sync
// Output: 1, 4, 3, 2
Hvorfor denne rækkefølge
- Synkron kode køres først:
1,4. - Stacken tømmes → dræn alle microtasks:
3. - Tag derefter én macrotask:
2.
Det er grunden til, at Promise.then altid køres før setTimeout(…, 0), selvom begge er "asynkrone" — microtasks har prioritet.
En praktisk konsekvens
js
// ❌ blocks the single thread — UI freezes for 5 seconds
while (Date.now() - start < 5000) {}
Langtvarigt synkront arbejde blokerer alt (rendering, klik). Flyt tungt CPU-arbejde til en Web Worker (en rigtig separat tråd).
Hvorfor det betyder noget
At forstå loopet forklarer asynkron rækkefølge, hvorfor promises løses før timere, og hvorfor man aldrig skal blokere hovedtråden — kernementalmodellen for alt asynkront JavaScript.