Wat is de volgorde van uitvoering van microtasks en macrotasks in de Event Loop?

De uitvoeringsvolgorde in de JavaScript Event Loop is als volgt:

1. Makrotaken (Task-queue) — bijvoorbeeld event handlers, setTimeout, setInterval, netwerkverzoeken.
2. Microtaken (Microtask-queue) — promises (.then/.catch/.finally), MutationObserver.

Sequentie:

• Er wordt één makrotaak uit de wachtrij uitgevoerd.
• Na het uitvoeren van de makrotaak, worden alle microtaken uit de microtask-queue achtereenvolgend uitgevoerd.
• Na het legen van de microtask-queue, gaat de Event Loop verder met de volgende makrotaak.

Met andere woorden, microtaken worden direct na de huidige makrotaak uitgevoerd en vóór de volgende, waardoor promises en andere hoge prioriteit microtaken kunnen worden afgehandeld.

Voorbeeld:

console.log('script start');

setTimeout(() => console.log('setTimeout'), 0);

Promise.resolve().then(() => console.log('promise1')).then(() => console.log('promise2'));

console.log('script end');

De output zal zijn:

script start
script end
promise1
promise2
setTimeout