Macrotasks en de task queue
Begrijp hoe timers en I/O worden ingepland.
Macrotasks en de task queue is een gratis JavaScript Academy-les op CoddyKit. Dit is les 2 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.
Wat is een macrotask?
Een macrotaak (ook wel taak genoemd) is een werkeenheid die gepland staat om later te worden uitgevoerd, nadat de huidige synchrone code klaar is. Terugbelfuncties van setTimeout zijn het klassieke voorbeeld.
Macrotaken wachten in de takenwachtrij totdat de aanroepstack leeg is.
setTimeout stelt werk uit
setTimeout registreert een functie die later wordt uitgevoerd. Zelfs met een vertraging van 0 wordt deze na alle huidige synchrone code uitgevoerd.
console.log('first');
setTimeout(() => console.log('third (timeout)'), 0);
console.log('second');De takenwachtrij
Wanneer een timer afgaat, wordt de bijbehorende functie in de takenwachtrij geplaatst. De eventlus haalt pas een taak uit deze wachtrij wanneer de aanroepstack leeg is, voert die volledig uit en controleert daarna opnieuw.
console.log('sync start');
setTimeout(() => console.log('task 1'), 0);
setTimeout(() => console.log('task 2'), 0);
console.log('sync end');Taken worden uitgevoerd in de volgorde waarin ze zijn geplaatst
Taken met dezelfde vertraging worden uitgevoerd in de volgorde waarin ze zijn gepland. De takenwachtrij werkt volgens FIFO: eerst erin, eerst eruit.
setTimeout(() => console.log('A'), 0);
setTimeout(() => console.log('B'), 0);
setTimeout(() => console.log('C'), 0);
console.log('sync');Vertraging is minimaal, niet exact
De vertraging die je meegeeft, is de minimale tijd voordat de functie mag worden uitgevoerd. De daadwerkelijke uitvoering vindt pas plaats wanneer de stack leeg is en eerdere taken klaar zijn, dus dat kan later zijn.
setTimeout(() => console.log('100ms'), 100);
setTimeout(() => console.log('0ms'), 0);
console.log('synchronous runs first');Sorteren op vertraging
Verschillende vertragingen veranderen de volgorde: kortere vertragingen worden eerder uitvoerbaar en worden daarom meestal vóór langere vertragingen uitgevoerd, ongeacht de planningsvolgorde.
setTimeout(() => console.log('50'), 50);
setTimeout(() => console.log('10'), 10);
setTimeout(() => console.log('30'), 30);
console.log('start');Eén taak per lusbeurt
De eventlus voert per beurt precies één macrotaak uit en doet daarna ander werk voordat de volgende beurt begint. Zo blijft het systeem tussen taken door reageren.
console.log('1');
setTimeout(() => {
console.log('2');
setTimeout(() => console.log('4'), 0);
}, 0);
setTimeout(() => console.log('3'), 0);Geneste timers komen later in de wachtrij
Een timer die binnen een taak wordt gepland, komt achter taken die al wachten in de wachtrij te staan en wordt daarom in een latere lusbeurt uitgevoerd.
setTimeout(() => {
console.log('outer');
setTimeout(() => console.log('inner nested'), 0);
}, 0);
setTimeout(() => console.log('sibling'), 0);setInterval gebruikt ook macrotaken
setInterval plant een herhalende macrotaak. Hier voeren we enkele herhalingen uit en stoppen we met clearInterval om de uitvoer beperkt te houden.
let count = 0;
const id = setInterval(() => {
count++;
console.log('tick ' + count);
if (count === 3) clearInterval(id);
}, 10);
console.log('interval scheduled');Synchrone code wint altijd
Hoe klein de vertraging ook is, elke macrotaak wacht achter alle synchrone code in de huidige uitvoering. De stack moet eerst leeg zijn.
setTimeout(() => console.log('macrotask'), 0);
for (let i = 1; i <= 3; i++) console.log('sync ' + i);
console.log('done sync');Waarom macrotaken belangrijk zijn
Macrotaken maken het mogelijk werk uit te stellen zonder te blokkeren. Door een zware taak op te splitsen in stukken met een timer blijft een app reageren. Macrotaken hebben echter niet de hoogste prioriteit: microtaken (Promises) worden vóór de volgende macrotaak uitgevoerd, zoals je hierna zult zien.
console.log('schedule');
setTimeout(() => console.log('runs after sync'), 0);
console.log('still sync');Korte controle
Wanneer wordt de terugbelfunctie van setTimeout(cb, 0) uitgevoerd?
Samenvatting: macrotaken
Je hebt geleerd hoe uitgesteld werk wordt gepland:
- Macrotaken (
setTimeout,setInterval) wachten in de takenwachtrij. - De wachtrij werkt volgens FIFO; de eventlus voert per beurt één taak uit.
- Vertraging is minimaal en synchrone code wordt altijd als eerste uitgevoerd.
- Microtaken hebben een hogere prioriteit; dat verken je hierna.
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
Veelgestelde vragen
Is de les “Macrotasks en de task queue” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Macrotasks en de task queue”, 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 “Macrotasks en de task queue”?
Begrijp hoe timers en I/O worden ingepland. 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 2 van 4.
Hoe lang duurt de les “Macrotasks en de task queue”?
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
- De call stack
- Macrotasks en de task queue
- Microtasks en Promises
- queueMicrotask en uitvoeringsvolgorde