JavaScript Academy · leksjon

queueMicrotask og rekkefølge

Styr kjøringsrekkefølgen presist.

Leksjon 4 av 413 trinn

queueMicrotask og rekkefølge er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Bli kjent med queueMicrotask

queueMicrotask er en direkte måte å planlegge en mikrooppgave på uten å opprette en Promise. Callbacken kjøres etter den gjeldende synkrone koden, men før en makrooppgave.

Det er det ryddigste verktøyet for å utsette arbeid til det aller neste mikrooppgavekontrollpunktet.

Grunnleggende bruk

Send en funksjon til queueMicrotask. Den kjøres etter at den synkrone koden er ferdig.

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

Samme prioritet som Promises

En queueMicrotask-callback og en Promise-.then deler mikrooppgavekø. De kjøres i den rekkefølgen de ble planlagt.

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

Går foran setTimeout

Som alle mikrooppgaver kjøres en queueMicrotask-callback før en hvilken som helst setTimeout-makrooppgave, også en som ble planlagt tidligere.

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

Rekkefølge under tømmingen

Mikrooppgaver kjøres i FIFO-rekkefølge. Den første som legges i køen, kjøres først når køen tømmes.

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

Kapsling av mikrooppgaver

En mikrooppgave kan legge en annen mikrooppgave i køen. Den nye kjøres under samme tømming, etter de som allerede ligger i køen, men før en makrooppgave.

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

Full rekkefølgedemonstrasjon

Kombiner synkron kode, mikrooppgaver og en makrooppgave. Følg regelen: først synkron kode, deretter mikrooppgaver i rekkefølge, og så tidtakeren.

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');

Vekselvirkning med async/await

En fortsettelse etter await er også en mikrooppgave, så den flettes inn med queueMicrotask i planleggingsrekkefølgen.

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

Hvorfor bruke queueMicrotask

Bruk dette når De må utsette en liten arbeidsbit til etter den gjeldende kallstakken, men før nettleseren gjengir siden eller en tidtaker utløses. Det unngår kostnaden og oppløsningssemantikken ved å opprette en Promise som bare skal kastes.

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

Unngå uendelige mikrooppgavesløyfer

Fordi mikrooppgaver tømmes fullstendig før makrooppgaver, vil en callback som alltid legger seg selv i kø, blokkere tidtakere og rendering for alltid. Sørg alltid for en stoppbetingelse.

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 komplette mentale modellen

For hver runde i event loop: kjør en makrooppgave (eller det opprinnelige skriptet), tøm alle mikrooppgaver, gjengi siden, og gjenta deretter. queueMicrotask lar Dem koble Dem presist inn i denne tømmefasen.

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

Hurtigsjekk

Hvor kjøres en queueMicrotask-callback i forhold til setTimeout(fn, 0)?

Besvar den i den interaktive leksjonen

Oppsummering: queueMicrotask og rekkefølge

De har fått kontroll på detaljert planlegging:

queueMicrotask planlegger en mikrooppgave uten en Promise.
Den deler mikrooppgavekø med Promise-callbacker, i FIFO-rekkefølge.
Alle mikrooppgaver tømmes før en hvilken som helst makrooppgave og før rendering.
Sløyfemodellen er: makrooppgave, tøm mikrooppgaver, gjengi, og gjenta.

Gratis å komme i gang

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

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «queueMicrotask og rekkefølge» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «queueMicrotask og rekkefølge», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «queueMicrotask og rekkefølge»?

Styr kjøringsrekkefølgen presist. Du øver på JavaScript 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 JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript 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 4 av 4.

Hvor lang tid tar leksjonen «queueMicrotask og rekkefølge»?

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

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

← Tilbake til JavaScript Academy