JavaScript Academy · Les

queueMicrotask en uitvoeringsvolgorde

Regel de uitvoeringsvolgorde nauwkeurig.

Les 4 van 413 stappen

queueMicrotask en uitvoeringsvolgorde is een gratis JavaScript Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Maak kennis met queueMicrotask

queueMicrotask is een directe manier om een microtaak te plannen zonder een Promise te maken. De callbackfunctie wordt uitgevoerd nadat de huidige synchrone code is voltooid, maar vóór elke macrotaak.

Dit is het duidelijkste hulpmiddel om werk uit te stellen tot het eerstvolgende controlepunt voor microtaken.

Basisgebruik

Geef een functie door aan queueMicrotask. Deze wordt uitgevoerd nadat de synchrone code is voltooid.

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

Dezelfde prioriteit als Promises

Een callbackfunctie van queueMicrotask en een Promise .then delen dezelfde wachtrij voor microtaken. Ze worden uitgevoerd in de volgorde waarin ze zijn gepland.

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

Gaat vóór setTimeout

Net als alle microtaken wordt een callbackfunctie van queueMicrotask uitgevoerd vóór elke macrotaak van setTimeout, zelfs als die eerder is gepland.

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

Volgorde tijdens het leeggemaakt worden

Microtaken worden uitgevoerd in FIFO-volgorde. De eerste taak die aan de wachtrij is toegevoegd, wordt als eerste uitgevoerd wanneer de wachtrij wordt leeggemaakt.

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

Microtaken nesten

Een microtaak kan een andere microtaak aan de wachtrij toevoegen. De nieuwe taak wordt tijdens dezelfde leegmaakactie uitgevoerd, na de taken die al in de wachtrij staan en vóór elke macrotaak.

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

Volledig voorbeeld van de volgorde

Combineer synchrone code, microtaken en een macrotaak. Volg de regel: eerst synchroon, daarna de microtaken in volgorde en vervolgens de timer.

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

Vervlechten met async/await

Een voortzetting na await is ook een microtaak, dus deze wordt volgens de planningsvolgorde afgewisseld met queueMicrotask.

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

Waarom je queueMicrotask gebruikt

Gebruik dit wanneer je een klein stukje werk moet uitstellen tot na de huidige aanroepstapel, maar vóór de browser tekent of een timer afgaat. Zo vermijd je de overhead en de resolutiesemantiek van het maken van een tijdelijke Promise.

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

Vermijd oneindige lussen van microtaken

Omdat microtaken volledig worden leeggemaakt vóór macrotaken, blokkeert een callbackfunctie die zichzelf altijd opnieuw aan de wachtrij toevoegt timers en weergave voor altijd. Zorg altijd voor een stopvoorwaarde.

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

Het volledige mentale model

Elke beurt van de gebeurtenislus: voer een macrotaak (of het beginscript) uit, maak daarna elke microtaak leeg, geef vervolgens de pagina weer en herhaal dit. Met queueMicrotask kun je precies op die leegmaakfase inhaken.

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

Korte controle

Waar wordt een callbackfunctie van queueMicrotask uitgevoerd ten opzichte van setTimeout(fn, 0)?

Beantwoord dit in de interactieve les

Samenvatting: queueMicrotask en volgorde

Je beheerst nu nauwkeurige planning:

queueMicrotask plant een microtaak zonder een Promise.
De functie deelt de wachtrij voor microtaken met Promise-callbackfuncties, in FIFO-volgorde.
Alle microtaken worden uitgevoerd vóór elke macrotaak en vóór de weergave.
Het lusmodel: mac rotaak, microtaken leegmaken, weergeven en herhalen.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “queueMicrotask en uitvoeringsvolgorde” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “queueMicrotask en uitvoeringsvolgorde”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “queueMicrotask en uitvoeringsvolgorde”?

Regel de uitvoeringsvolgorde nauwkeurig. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “queueMicrotask en uitvoeringsvolgorde”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy