JavaScript Academy · Lektion

queueMicrotask och körordning

Styr körordningen exakt.

Lektion 4 av 413 steg

queueMicrotask och körordning är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Introduktion till queueMicrotask

queueMicrotask är ett direkt sätt att schemalägga en mikrouppgift utan att skapa ett Promise. Callbacken körs efter den aktuella synkrona koden, men före alla makrouppgifter.

Det är det renaste verktyget för att skjuta upp arbete till nästa mikrouppgiftskontrollpunkt.

Grundläggande användning

Skicka en funktion till queueMicrotask. Den körs när den synkrona koden har slutförts.

console.log('start');
queueMicrotask(() => console.log('microtask'));
console.log('end');

Samma prioritet som Promise

En queueMicrotask-callback och en Promise-.then-callback delar mikrouppgiftskö. De körs i den ordning de schemalades.

queueMicrotask(() => console.log('qmt 1'));
Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('qmt 2'));
console.log('sync');

Går före setTimeout

Precis som alla mikrouppgifter körs en queueMicrotask-callback före alla setTimeout-makrouppgifter, även en som schemalades tidigare.

setTimeout(() => console.log('timeout (macro)'), 0);
queueMicrotask(() => console.log('microtask (micro)'));
console.log('sync');

Ordningen under tömningen

Mikrouppgifter körs i FIFO-ordning. Den första som läggs i kön körs först när kön töms.

queueMicrotask(() => console.log('1'));
queueMicrotask(() => console.log('2'));
queueMicrotask(() => console.log('3'));
console.log('sync done');

Kapslade mikrouppgifter

En mikrouppgift kan lägga till en annan mikrouppgift i kön. Den nya körs under samma tömning, efter de mikrouppgifter som redan ligger i kön, men före alla makrouppgifter.

queueMicrotask(() => {
  console.log('A');
  queueMicrotask(() => console.log('C (nested)'));
});
queueMicrotask(() => console.log('B'));
setTimeout(() => console.log('D (macro)'), 0);
console.log('sync');

Fullständigt ordningsexempel

Kombinera synkron kod, mikrouppgifter och en makrouppgift. Följ regeln: först synkron kod, sedan mikrouppgifter i ordning och därefter timern.

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

Varvas med async/await

En fortsättning efter await är också en mikrouppgift, så den varvas med queueMicrotask i schemaläggningsordning.

async function task() {
  console.log('a');
  await null;
  console.log('d (after await)');
}
queueMicrotask(() => console.log('c (queueMicrotask)'));
task();
console.log('b');

Varför använda queueMicrotask

Använd det när Ni måste skjuta upp en liten arbetsuppgift till efter den aktuella anropsstacken men före att webbläsaren renderar eller en timer körs. Det undviker kostnaden och upplösningssemantiken hos ett tillfälligt Promise.

let ready = false;
queueMicrotask(() => {
  ready = true;
  console.log('ready is now', ready);
});
console.log('ready is', ready);

Undvik oändliga mikrouppgiftsloopar

Eftersom mikrouppgifter töms helt före makrouppgifter blockerar en callback som alltid lägger sig själv i kön timers och rendering för alltid. Se alltid till att det finns ett stoppvillkor.

let n = 0;
function step() {
  if (n++ < 3) {
    console.log('step ' + n);
    queueMicrotask(step);
  }
}
setTimeout(() => console.log('macro runs after all micros'), 0);
step();

Den fullständiga mentala modellen

Varje varv i event loop: kör en makrouppgift (eller det ursprungliga skriptet), töm sedan alla mikrouppgifter, rendera och upprepa. queueMicrotask gör att Ni kan ansluta exakt till den tömningsfasen.

console.log('script start');
setTimeout(() => console.log('setTimeout'), 0);
queueMicrotask(() => console.log('queueMicrotask'));
Promise.resolve().then(() => console.log('promise then'));
console.log('script end');

Snabb kontroll

Var körs en queueMicrotask-callback i förhållande till setTimeout(fn, 0)?

Besvara frågan i den interaktiva lektionen

Sammanfattning: queueMicrotask och ordning

Du behärskar nu finjusterad schemaläggning:

queueMicrotask schemalägger en mikrouppgift utan ett Promise.
Den delar mikrouppgiftskö med Promise-callbacker, i FIFO-ordning.
Alla mikrouppgifter töms före alla makrouppgifter och före rendering.
Loopmodellen är: makrouppgift, töm mikrouppgifter, rendera och upprepa.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”queueMicrotask och körordning” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”queueMicrotask och körordning”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”queueMicrotask och körordning”?

Styr körordningen exakt. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”queueMicrotask och körordning”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy