Erzähle mir vom Event Loop.

Der Ereignisschleife ist die Grundlage der asynchronen Arbeit in JavaScript. Sie steuert die Ausführung des Codes, die Ereignisbehandlung und die Interaktion mit der Außenwelt.

Hauptkomponenten:

• Heap (Heap): Speicherbereich für die Zuweisung von Objekten.
• Stack (Stapel): Ort, an dem die Ausführungskontexte von Funktionen gespeichert werden. Beim Aufruf einer Funktion wird sie in den Stapel gelegt, beim Beenden entfernt.
• Web APIs: Schnittstellen, die vom Browser bereitgestellt werden (DOM, AJAX, Timers usw.). Sie verarbeiten asynchrone Operationen.
• Callback-Queue (Callback-Warteschlange): Nachrichtenwarteschlange im Zusammenhang mit Ereignissen. Web APIs legen hier die Callbacks abgeschlossener asynchroner Operationen ab.
• Ereignisschleife (Event Loop): Überwacht ständig den Stapel und die Callback-Warteschlange. Wenn der Stapel leer ist, nimmt sie den ersten Callback aus der Warteschlange und legt ihn in den Stapel zur Ausführung.

Prozess:

1. Synchroner Code wird im Stapel ausgeführt.
2. Asynchrone Operationen (z.B. setTimeout, fetch) werden an Web APIs übergeben.
3. Wenn eine asynchrone Operation abgeschlossen ist, wird ihr Callback in die Callback-Warteschlange gelegt.
4. Die Ereignisschleife wartet, bis der Stapel leer ist.
5. Wenn der Stapel leer ist, nimmt die Ereignisschleife den ersten Callback aus der Warteschlange und legt ihn in den Stapel, wo er ausgeführt wird.

Beispiel mit setTimeout:

console.log('Start');

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

console.log('Ende');

Ausgabe:

Start
Ende
Inside setTimeout

Trotz eines Timeouts von 0 ms wird der Callback von setTimeout nach dem synchronen Code ausgeführt, weil er in die Warteschlange kommt und auf das Leeren des Stapels wartet.

In Node.js existiert ebenfalls eine Ereignisschleife, jedoch mit einigen Unterschieden in den Phasen der Warteschlangenverarbeitung.