Event Loop
JavaScript hat einen einzigen Thread. Der Event Loop entscheidet, wann Callbacks, Promises und Timer laufen.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Call Stack und Queue
Synchroner Code läuft auf dem Call Stack, eine Funktion nach der anderen.
Asynchrone Ergebnisse (Timer, fetch) landen in Warteschlangen. Der Event Loop schiebt sie erst auf den Stack, wenn er leer ist.
Micro- vs. Macrotasks
Promise-Callbacks sind Microtasks und laufen vor dem nächsten Macrotask (setTimeout).
Deshalb kommt "Promise" vor "Timeout" — auch bei 0 Millisekunden.
console.log('1: sync');
setTimeout(() => console.log('4: timeout'), 0);
Promise.resolve().then(() => console.log('3: promise'));
console.log('2: sync ende');
// Ausgabe: 1, 2, 3, 4Vertiefung
Call Stack, Microtasks, Macrotasks
Synchroner Code läuft sofort auf dem Call Stack. Promise-Callbacks landen als Microtasks in einer Queue, Timer als Macrotasks. Microtasks werden vor dem nächsten Macrotask abgearbeitet.
Deshalb erscheint „Promise“ vor „Timeout“, selbst bei 0 ms. Der Event Loop schiebt Aufgaben erst auf den Stack, wenn er leer ist.
console.log("1 sync");
setTimeout(() => console.log("4 timeout"), 0);
Promise.resolve().then(() => console.log("3 promise"));
console.log("2 sync ende");Merksatz: Synchron → Microtasks → Macrotasks. Diese Reihenfolge erklärt viele überraschende Ausgaben.
Übungsaufgabe
Reihenfolge vorhersagen
Schreibe die erwartete Ausgabe des Beispiels als Kommentar auf und prüfe sie anschließend im Browser. Erkläre den Unterschied zwischen Promise und Timeout.
Das soll dein Programm können
- Vier Ausgaben in der richtigen Reihenfolge
- Kommentar mit der Vorhersage
- Erklärung zu Micro- und Macrotasks
- Im Browser verifiziert
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Alles Synchrone zuerst. Danach Promise-Callbacks, dann Timer.
Lösung anzeigen
console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");
// Vorhersage: A, D, C, B
// A und D sind synchron.
// C ist eine Microtask und läuft vor dem Timer B.Warum funktioniert das?
A und D laufen sofort. Promise.then wird als Microtask vor dem Macrotask setTimeout ausgeführt. Deshalb ist die Reihenfolge A, D, C, B.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.