JavaScript Event Loop: Nicht-blockierende asynchrone Ausführung
Die JavaScript-Ereignisschleife verwaltet asynchrone Operationen, indem sie Rückruffunktionen aus einer Warteschlange ausführt, wenn der Aufrufstapel leer ist, und so Thread-Blockaden verhindert.
Loop. Control structure repeating code until condition is met. Generated ELI5 content
graph LR
Center["JavaScript Event Loop: Nicht-blockierende asynchrone Ausführung"]:::main
Pre_variable["variable"]:::pre --> Center
click Pre_variable "/terms/variable"
Rel_iteration["iteration"]:::related -.-> Center
click Rel_iteration "/terms/iteration"
Rel_recursion["recursion"]:::related -.-> Center
click Rel_recursion "/terms/recursion"
Rel_closed_loop_life_support["closed-loop-life-support"]:::related -.-> Center
click Rel_closed_loop_life_support "/terms/closed-loop-life-support"
classDef main fill:#7c3aed,stroke:#8b5cf6,stroke-width:2px,color:white,font-weight:bold,rx:5,ry:5;
classDef pre fill:#0f172a,stroke:#3b82f6,color:#94a3b8,rx:5,ry:5;
classDef child fill:#0f172a,stroke:#10b981,color:#94a3b8,rx:5,ry:5;
classDef related fill:#0f172a,stroke:#8b5cf6,stroke-dasharray: 5 5,color:#94a3b8,rx:5,ry:5;
linkStyle default stroke:#4b5563,stroke-width:2px;
🧒 Erkläre es wie einem 5-Jährigen
Stellen Sie sich [JavaScript](/de/terms/javascript) wie einen Koch vor, der nur eine Sache gleichzeitig tun kann. Wenn er einen Kuchen backen muss (eine lange Aufgabe), steht er nicht einfach da und wartet. Er stellt den Kuchen in den Ofen und stellt einen Timer, dann beginnt er sofort mit der Zubereitung eines Salats (eine andere Aufgabe). Wenn der Ofen-Timer klingelt, beendet der Koch den Salat, nimmt den Kuchen heraus und macht dann weiter. Die Ereignisschleife ist wie das System des Kochs zur Verwaltung dieser 'Warteschlangen'-Aufgaben, die sicherstellt, dass sie bei Bedarf erledigt werden, ohne andere Arbeiten zu unterbrechen.
🤓 Expert Deep Dive
Die JavaScript-Ereignisschleife ist ein Concurrency-Modell, das die Ausführung von Code, Aufgaben und Ereignissen orchestriert. Sie überwacht kontinuierlich den Aufrufstapel und die Aufgabenwarteschlange(n). Synchroner Code wird direkt im Aufrufstapel ausgeführt. Asynchrone Operationen (z. B. setTimeout, Promises, I/O) werden an die APIs der Host-Umgebung übergeben, die deren Ausführung verwalten. Sobald eine asynchrone Operation abgeschlossen ist, wird ihr Callback (oder der Erfüllungs-Handler eines Promises) in eine entsprechende Warteschlange gestellt – die Aufgabenwarteschlange (für Makroaufgaben wie setTimeout, DOM-Ereignisse) oder die Microtask-Warteschlange (für Microtasks wie Promises, queueMicrotask). Die Hauptfunktion der Ereignisschleife besteht darin, Aufgaben aus der Warteschlange zu holen und auszuführen, wenn der Aufrufstapel leer ist. Microtasks werden im Allgemeinen vor Makroaufgaben verarbeitet. Insbesondere nach Abschluss der aktuellen Makroaufgabe und vor Beginn der nächsten Makroaufgabe führt die Ereignisschleife alle verfügbaren Microtasks aus. Dies priorisiert sofortige Rückrufe (wie Promise-Auflösungen) gegenüber verzögerten und gewährleistet so die Reaktionsfähigkeit und effiziente Handhabung asynchroner Operationen in verschiedenen JavaScript-Umgebungen.