JavaScript Academy · Lektion

Microtasks og promises

Lær, hvorfor callbacks fra promises køres først.

Lektion 3 af 413 trin

Microtasks og promises er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad er en mikrotask?

En mikrotask er en udskudt opgave med høj prioritet. Promise-callbackfunktioner (.then, .catch, .finally) og queueMicrotask planlægger alle mikrotasks.

Den vigtigste regel er: Efter hver synkrone kørsel tømmes alle mikrotasks, før en makrotask.

Promise-callbackfunktioner er udskudte

Selv en allerede afgjort Promise planlægger sin .then-callbackfunktion som en mikrotask. Den kører ikke synkront.

console.log('start');
Promise.resolve().then(() => console.log('promise then'));
console.log('end');

Mikrotasks kører før makrotasks

Dette er den vigtigste rækkefølgeregel. En Promise-callbackfunktion kører før en setTimeout-callbackfunktion, selv hvis timeren blev planlagt først.

setTimeout(() => console.log('timeout (macro)'), 0);
Promise.resolve().then(() => console.log('promise (micro)'));
console.log('sync');

Mikrotask-køen tømmes helt

Hændelsesløkken tømmer hele mikrotask-køen, før den tager den næste makrotask. Flere Promise-callbackfunktioner kører alle samlet under denne tømning.

setTimeout(() => console.log('macro'), 0);
Promise.resolve().then(() => console.log('micro 1'));
Promise.resolve().then(() => console.log('micro 2'));
console.log('sync');

Kædede Promises

Hver .then i en kæde planlægger en ny mikrotask, når den forrige afsluttes. De kører stadig alle før en afventende timer.

setTimeout(() => console.log('timeout'), 0);
Promise.resolve()
  .then(() => console.log('then 1'))
  .then(() => console.log('then 2'))
  .then(() => console.log('then 3'));
console.log('sync');

Mikrotasks, der planlægges under tømningen

Hvis en mikrotask planlægger en anden mikrotask, kører den nye også under den samme tømning, før en makrotask. Køen bliver ved med at blive tømt, indtil den virkelig er tom.

Promise.resolve().then(() => {
  console.log('micro A');
  Promise.resolve().then(() => console.log('micro B (added later)'));
});
setTimeout(() => console.log('macro'), 0);
console.log('sync');

Afgjorte værdier føres videre

En værdi, der returneres fra en .then-handlerfunktion, bliver til inddata for den næste handlerfunktion i kæden, alt sammen via mikrotasks.

Promise.resolve(2)
  .then(n => n * 3)
  .then(n => n + 1)
  .then(n => console.log('result', n));
console.log('sync first');

async/await bruger mikrotasks

Kode efter en await genoptages som en mikrotask. Derfor kører en fortsættelse efter await før en timer, der blev planlagt tidligere.

async function run() {
  console.log('a');
  await null;
  console.log('c (after await)');
}
setTimeout(() => console.log('d (timeout)'), 0);
run();
console.log('b');

En samlet rækkefølgegennemgang

Saml det hele. Forudsig rækkefølgen: først synkron kode, derefter alle mikrotasks og til sidst makrotasken.

console.log('1 sync');
setTimeout(() => console.log('5 timeout'), 0);
Promise.resolve().then(() => console.log('3 promise'));
Promise.resolve().then(() => console.log('4 promise'));
console.log('2 sync');

Hvorfor mikrotask-udsultning er risikabelt

Fordi mikrotasks altid kører før makrotasks, kan en mikrotask, der bliver ved med at planlægge flere mikrotasks, udsulte timere og gengivelse. Sørg for, at mikrotask-kæder har en slutning.

let n = 0;
function loop() {
  if (n++ < 3) {
    console.log('micro ' + n);
    Promise.resolve().then(loop);
  }
}
setTimeout(() => console.log('macro after micros'), 0);
loop();

Hvorfor denne rækkefølge er vigtig

Når du ved, at mikrotasks kører før makrotasks, forstår du, hvorfor Promise-resultater vises før timer-callbackfunktioner, og hvorfor der opstår fejl i rækkefølgen. Reglen er enkel: synkron kode, derefter tømmes alle mikrotasks, så én makrotask, og gentag.

console.log('A');
Promise.resolve().then(() => console.log('B'));
setTimeout(() => console.log('D'), 0);
console.log('C');

Hurtigt tjek

En Promise-.then-callbackfunktion og en setTimeout(fn, 0) afventer begge. Hvilken kører først?

Besvar den i den interaktive lektion

Opsummering: Mikrotasks og Promises

Du har lært prioritetsreglen:

Mikrotasks kommer fra Promises og queueMicrotask.
Hele mikrotask-køen tømmes før en makrotask.
Fortsættelser fra async/await er mikrotasks.
Endeløse mikrotask-kæder kan udsulte timere og gengivelse.

Gratis at komme i gang

Lær JavaScript 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: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Microtasks og promises” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Microtasks og promises”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Microtasks og promises”?

Lær, hvorfor callbacks fra promises køres først. Du øver dig i JavaScript 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å JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript 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 3 af 4.

Hvor lang tid tager lektionen “Microtasks og promises”?

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 JavaScript Academy-lektion?

Ja. Alle JavaScript 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

← Tilbage til JavaScript Academy