Frontend Academy · leksjon

Event loop: call stack, kø og mikrotasks

Visualiser hvordan JavaScript kjører: call stack, oppgavekøen, mikrotasks fra Promises, og hvorfor brukergrensesnittet aldri blokkeres under asynkrone operasjoner.

Leksjon 1 av 413 trinn

Event loop: call stack, kø og mikrotasks er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

JavaScript er entrådet

JavaScript kjører i én tråd – den kan bare utføre én kodebit om gangen. Likevel håndterer den tusenvis av asynkrone operasjoner (nettverksforespørsler, tidsstyrere og UI-hendelser) uten å blokkere. Hvordan? Med event loop.

Kallstakken

Kallstakken holder oversikt over hvilken funksjon som kjører akkurat nå. Når en funksjon kalles, legges en stack frame på. Når funksjonen returnerer, tas stack framen av. Hvis stakken blir full (ved uendelig rekursjon), får du stack overflow.

function c() { /* does something */ }
function b() { c(); }
function a() { b(); }
a();

// Call stack during c():
// c    ← top
// b
// a
// (anonymous)

Web API-er — avlastning av arbeid

Når JavaScript kaller en asynkron funksjon (setTimeout, fetch eller addEventListener), overlates arbeidet til en Web API i nettleseren. JavaScript-motoren fortsetter med neste linje – den venter ikke.

console.log('1');
setTimeout(() => console.log('2'), 0); // handed to Web API
console.log('3');
// Output: 1, 3, 2

Oppgavekøen (makrooppgavekøen)

Når en Web API-operasjon er fullført (timeren utløses, fetch løses), legges callbacken i oppgavekøen (makrooppgavekøen). Hendelsesløkken flytter callbacken til anropsstakken først når stakken er tom.

Mikrooppgavekøen

Promises bruker en mikrooppgavekø – en kø med høy prioritet. Etter at hver oppgave er fullført, og før neste oppgave hentes, tømmes alle ventende mikrooppgaver. Mikrooppgaver kjøres alltid før neste makrooppgave.

console.log('1');
setTimeout(() => console.log('timeout'), 0);  // macrotask
Promise.resolve().then(() => console.log('promise')); // microtask
console.log('2');
// Output: 1, 2, promise, timeout

Hendelsesløkken i praksis

Algoritmen for hendelsesløkken: 1) Kjør den gjeldende oppgaven fra anropsstakken til den er tom. 2) Tøm hele mikrooppgavekøen. 3) Gjengi eventuelt siden. 4) Hent neste makrooppgave og gjenta.

queueMicrotask()

queueMicrotask(fn) planlegger en callback i mikrooppgavekøen uten å opprette en Promise. Dette trengs sjelden direkte, men er nyttig for å forstå hvordan biblioteker implementerer planlegging.

queueMicrotask(() => console.log('microtask'));
console.log('sync');
// Output: sync, microtask

Hvorfor lange oppgaver fryser brukergrensesnittet

Hvis en synkron oppgave kjører for lenge (for eksempel en tett løkke som behandler store datamengder), kan ikke hendelsesløkken behandle brukergrensesnitt-hendelser eller gjengivelse. Dette fryser siden. Del opp langvarig arbeid i mindre deler med setTimeout, slik at kontrollen gis tilbake til hendelseslø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 – ekte parallellitet

For prosessorkrevende arbeid kan De bruke en Web Worker – en separat tråd med sin egen hendelsesløkke. Workers kommuniserer med hovedtråden via postMessage. Ingen delt hukommelse og ingen kappløpsbetingelser.

requestAnimationFrame

requestAnimationFrame(callback) planlegger en callback før nettleseren tegner siden på nytt. Bruk den til JavaScript-styrte animasjoner – den synkroniseres med skjermens oppdateringsfrekvens (vanligvis 60 fps).

function animate(timestamp) {
  // update positions based on timestamp
  element.style.transform = `translateX(${timestamp * 0.1 % 400}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Visualisering av hendelsesløkken

Den interaktive demonstrasjonen på latentflip.com/loupe lar Dem lime inn kode og se anropsstakken, Web API, oppgavekøen og hendelsesløkken i sakte film. Den er svært nyttig for å bygge opp en intuitiv forståelse.

Kort sjekk

Etter at en Promise er løst, i hvilken kø kjøres callbacken til .then()?

Besvar den i den interaktive leksjonen

Oppsummering: Hendelsesløkken

JavaScript kjører i én tråd. Asynkront arbeid sendes til Web API-er. Callbacker returnerer via oppgavekøen (setTimeout, fetch-callbacker) eller mikrooppgavekøen (Promises). Hendelsesløkken tømmer mikrooppgavene etter hver oppgave, før neste gjengivelse eller makrooppgave. Langvarig synkron kode blokkerer alt.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Event loop: call stack, kø og mikrotasks» gratis?

Ja – hele teksten i «Event loop: call stack, kø og mikrotasks» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Event loop: call stack, kø og mikrotasks»?

Visualiser hvordan JavaScript kjører: call stack, oppgavekøen, mikrotasks fra Promises, og hvorfor brukergrensesnittet aldri blokkeres under asynkrone operasjoner. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Event loop: call stack, kø og mikrotasks»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Event loop: call stack, kø og mikrotasks
Callbacks og callback hell
Promises: then, catch, finally og Promise.all
async/await og feilhåndtering

← Tilbake til Frontend Academy