Event loop: call stack, queue og microtasks
Visualisér, hvordan JavaScript kører: call stack, task queue, microtasks fra Promises, og hvorfor brugergrænsefladen aldrig blokeres under asynkrone operationer.
Event loop: call stack, queue og microtasks er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
JavaScript kører i én tråd
JavaScript kører i én tråd — det kan kun udføre ét stykke kode ad gangen. Alligevel håndterer det tusindvis af asynkrone operationer (netværksanmodninger, timere og UI-hændelser) uden at blokere. Hvordan? Hændelsesløkken.
Kaldestakken
Kaldestakken er det sted, hvor JavaScript holder styr på, hvilken funktion der kører nu. Når en funktion kaldes, skubbes en stakramme på. Når funktionen returnerer, tages rammen af igen. Hvis stakken bliver fyldt (på grund af uendelig rekursion), får du et stakoverløb.
function c() { /* does something */ }
function b() { c(); }
function a() { b(); }
a();
// Call stack during c():
// c ← top
// b
// a
// (anonymous)Web-API'er — Uddelegering af arbejde
Når JavaScript kalder en asynkron funktion (setTimeout, fetch, addEventListener), uddelegeres arbejdet til en Web API i browseren. JavaScript-motoren fortsætter med næste linje — den venter ikke.
console.log('1');
setTimeout(() => console.log('2'), 0); // handed to Web API
console.log('3');
// Output: 1, 3, 2Opgavekøen (makroopgavekøen)
Når en Web API-handling er fuldført (timeren udløses, fetch afsluttes), placeres callbacken i opgavekøen (makroopgavekøen). Hændelsesløkken flytter kun callbacken til kaldestakken, når stakken er tom.
Mikroopgavekøen
Promises bruger en mikroopgavekø — en kø med høj prioritet. Når hver opgave er fuldført, og før den næste opgave hentes, tømmes alle ventende mikroopgaver. Mikroopgaver kører altid før den næste makroopgave.
console.log('1');
setTimeout(() => console.log('timeout'), 0); // macrotask
Promise.resolve().then(() => console.log('promise')); // microtask
console.log('2');
// Output: 1, 2, promise, timeoutHændelsesløkken i praksis
Hændelsesløkkens algoritme: 1) Udfør den aktuelle opgave fra kaldestakken, indtil den er tom. 2) Tøm hele mikroopgavekøen. 3) Gengiv eventuelt. 4) Hent den næste makroopgave, og gentag.
queueMicrotask()
queueMicrotask(fn) planlægger en callback i mikroopgavekøen uden at oprette en Promise. Det er sjældent nødvendigt at bruge direkte, men det er nyttigt til at forstå, hvordan biblioteker implementerer planlægning.
queueMicrotask(() => console.log('microtask'));
console.log('sync');
// Output: sync, microtaskHvorfor lange opgaver får brugergrænsefladen til at fryse
Hvis en synkron opgave kører for længe (for eksempel en tæt løkke, der behandler store datamængder), kan hændelsesløkken ikke behandle brugergrænsefladehændelser eller gengivelse. Det får siden til at fryse. Opdel langt arbejde i mindre dele med setTimeout, så kontrollen gives tilbage til hændelsesløkken.
// Bad — blocks the UI for seconds:
for (let i = 0; i < 10_000_000; i++) { /* heavy work */ }
// Better — yield periodically:
async function processInChunks(items) {
for (let i = 0; i < items.length; i++) {
process(items[i]);
if (i % 100 === 0) await new Promise(r => setTimeout(r, 0)); // yield
}
}Web Workers — ægte parallelitet
Til CPU-intensive opgaver skal du bruge en Web Worker — en separat tråd med sin egen hændelsesløkke. Workers kommunikerer med hovedtråden via postMessage. Ingen delt hukommelse, ingen kapløbsbetingelser.
requestAnimationFrame
requestAnimationFrame(callback) planlægger en callback før browserens næste gentegning. Brug den til JavaScript-styrede animationer — den synkroniserer med skærmens opdateringsfrekvens (typisk 60 billeder/s).
function animate(timestamp) {
// update positions based on timestamp
element.style.transform = `translateX(${timestamp * 0.1 % 400}px)`;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);Visualisering af hændelsesløkken
Den interaktive demonstration på latentflip.com/loupe lader dig indsætte kode og se kaldestakken, Web API'et, opgavekøen og hændelsesløkken i slowmotion. Den er uundværlig, når du skal opbygge en intuitiv forståelse.
Hurtigt tjek
Når en Promise er opfyldt, i hvilken kø kører dens .then()-callback?
Opsummering: Hændelsesløkken
JavaScript er enkelttrådet. Asynkront arbejde sendes til Web API'er. Callbacks vender tilbage via opgavekøen (setTimeout, fetch-callbacks) eller mikroopgavekøen (Promises). Hændelsesløkken tømmer mikroopgaver efter hver opgave, før den næste gengivelse eller makroopgave. Langvarig synkron kode blokerer alt.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Event loop: call stack, queue og microtasks” gratis?
Ja — hele teksten til “Event loop: call stack, queue og microtasks” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Event loop: call stack, queue og microtasks”?
Visualisér, hvordan JavaScript kører: call stack, task queue, microtasks fra Promises, og hvorfor brugergrænsefladen aldrig blokeres under asynkrone operationer. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Event loop: call stack, queue og microtasks”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Event loop: call stack, queue og microtasks
- Callbacks og callback hell
- Promises: then catch finally Promise.all
- async/await og fejlhåndtering