Hoe werkt de event loop in de web-API?

De gebeurtenisslus in JavaScript (in de context van de webbrowser) is een mechanisme dat het mogelijk maakt om asynchrone operaties uit te voeren zonder de hoofduitvoeringsstroom te blokkeren. Het bestaat uit verschillende componenten:

Heap (Heap): Geheugenruimte waar objecten worden opgeslagen.
Call Stack (Aanroepstapel): LIFO-gegevensstructuur die de uitvoering van synchronische functies bijhoudt.
Web APIs: Worden geleverd door de browser (DOM, AJAX, setTimeout, setInterval, Event Listeners, etc.). Ze maken geen deel uit van de JavaScript-engine.
Callback Queue (Callbackwachtrij) / Task Queue (Taakwachtrij): Wachtrij voor berichten om asynchrone taken uit te voeren.
Microtask Queue (Microtaskwachtrij): Prioritaire wachtrij voor microtaken (Promise.then(), async/await, queueMicrotask). Wordt uitgevoerd voordat de taakwachtrij wordt afgehandeld.
Event Loop (Gebeurtenislus): Controleert voortdurend de call stack en de wachtrij. Als de stack leeg is, verplaatst hij de eerste handler uit de microtaskwachtrij naar de stack. Na het legen van de microtaskwachtrij, verplaatst hij de eerste handler uit de taakwachtrij naar de stack.

Het proces werkt als volgt:

Synchronous code wordt uitgevoerd en functies worden op de call stack geplaatst.
Wanneer een asynchrone operatie wordt aangetroffen (bijvoorbeeld setTimeout), wordt deze overgedragen aan de juiste Web API. De uitvoering van de synchronische code gaat door.
De Web API voert de operatie op de achtergrond uit.
Na voltooiing van de asynchrone operatie, wordt de handler (callback) van die operatie geplaatst in de taakwachtrij (voor normale async operaties) of in de microtaskwachtrij (voor promises).
De event loop controleert voortdurend de call stack. Als deze leeg is:
- Controleert hij de microtaskwachtrij. Als er handlers zijn, verplaatst hij ze naar de call stack voor uitvoering, totdat de microtaskwachtrij leeg is.
- Vervolgens controleert hij de taakwachtrij. Als er handlers zijn, verplaatst hij de eerste naar de call stack voor uitvoering.
Dit proces wordt herhaald, waardoor asynchrone operaties kunnen worden uitgevoerd zonder de hoofdthread te blokkeren.

Voorbeeld met setTimeout:

// Deze code wordt uitgevoerd in de call stack
console.log('Start');

// setTimeout - Web API. Callback wordt na 0ms in de taakwachtrij geplaatst.
// De daadwerkelijke uitvoering kan worden vertraagd door de event loop.
setTimeout(() => {
  console.log('Timeout');
}, 0);

// Deze code wordt uitgevoerd in de call stack na setTimeout
console.log('Einde');

// Output:
// Start
// Einde
// Timeout

Voorbeeld met promises:

// Wordt uitgevoerd in de call stack
console.log('A');

// Promise. De callback van then() wordt in de microtaskwachtrij geplaatst
Promise.resolve().then(() => {
  console.log('B');
});

// Wordt uitgevoerd in de call stack
console.log('C');

// Output:
// A
// C
// B