EMZETT.JavaScript führt Code in einem Ablauf (Thread) aus und kann trotzdem Timer, Klicks und Netzwerkantworten bedienen. Das Geheimnis ist die Event Loop.
Timer
| Funktion | Wirkung |
|---|---|
setTimeout(f, ms) | f einmal nach ms Millisekunden |
setInterval(f, ms) | f wiederholt alle ms Millisekunden |
clearTimeout(id), clearInterval(id) | Timer abbrechen |
requestAnimationFrame(f) | vor dem nächsten Bildaufbau (nur Browser) |
queueMicrotask(f) | sofort nach dem aktuellen Code |
Ergebnis
Tick 1 Tick 2 Tick 3 gestoppt
Wie die Event Loop arbeitet
- Der Call Stack führt den aktuellen Code aus.
- Langsame Aufgaben (Timer, Netzwerk) übernimmt der Browser/Node im Hintergrund.
- Wenn sie fertig sind, landet ihr Callback in einer Warteschlange.
- Sobald der Call Stack leer ist, holt die Event Loop den nächsten Callback.
Es gibt zwei Warteschlangen mit Vorrang:
| Warteschlange | Beispiele | Wann |
|---|---|---|
| Microtasks | Promise-Callbacks, queueMicrotask | direkt nach dem aktuellen Code, vor allem anderen |
| Macrotasks | Timer, Klicks, I/O | danach, einer pro Runde |
Ergebnis
1 synchron 2 async-Funktion läuft synchron bis zum ersten await 3 Promise (Microtask) 4 queueMicrotask 4b nach await (Microtask) 5 Timer (Macrotask)
Den Ablauf nicht blockieren
Ein langer Code-Block hält alles an: Die Seite reagiert nicht mehr, Timer verspäten sich.
Ergebnis
Schleife fertig Timer verspätet: true
Gegenmittel:
- Arbeit in kleine Stücke teilen und zwischendurch
setTimeout(..., 0)oderawaiteinschieben - Schwere Berechnungen in einen Web Worker (Browser) oder Worker Thread (Node.js) auslagern
- Auf Fortschritt asynchron warten statt in einer Schleife abzufragen
Arbeit in Stücke teilen
Ergebnis
Timer kam zwischendurch dran Summe: 500000500000
Debounce und Throttle
Bei häufigen Ereignissen (Tippen, Scrollen) willst du nicht jedes Mal reagieren:
Ergebnis
Suche nach: java
Debounce wartet, bis es ruhig ist, Throttle lässt höchstens eine Ausführung pro Zeitraum zu.
Merke
- JavaScript hat einen Ablauf; langsame Dinge laufen im Hintergrund und melden sich per Callback
- Microtasks (Promises) laufen vor Macrotasks (Timer, Events)
- Lange Schleifen blockieren alles: aufteilen oder in einen Worker verlagern
setTimeout/setIntervalmitclear...abbrechen- Debounce fasst schnelle Ereignisse zusammen
Aufgabe
Baue einen Countdown von 5 bis 0 mit setInterval, der sich selbst beendet und am Schluss "Start!" ausgibt.