Führen Sie ein paar Zeilen mit setTimeout und einem Versprechen aus, und die Ausgabereihenfolge wird Sie vielleicht überraschen. Die JavaScript-Ereignisschleife erklärt warum. Es ist der Mechanismus, der es einer Single-Threaded-Sprache ermöglicht, Timer, Netzwerkaufrufe und Klicks ohne Einfrieren zu verarbeiten.

Sobald man es verstanden hat, beginnt eine ganze Klasse verwirrender Fehler einen Sinn zu ergeben. Wir haben jedes Beispiel auf Node.js 24 ausgeführt und die Ausgabe stammt von diesem Lauf. Die grundlegenden Bestellregeln gelten auch in Browsern, und wir weisen darauf hin, wo sich Node.js unterscheidet. Sie werden mehr davon haben, wenn Sie bereits die Grundlagen von JavaScript-Versprechen kennen.

Warum die Ereignisschleife existiert

JavaScript führt Ihren Code in einem Hauptthread aus, sodass jeweils nur ein Teil davon ausgeführt wird. Wenn einfach auf eine Netzwerkanfrage gewartet würde, würde eine Seite einfrieren, bis die Antwort zurückkäme.

JavaScript wartet also nicht. Langsame Arbeit wird an die Host-Umgebung übergeben, also an den Browser oder Node.js, die sie im Hintergrund erledigen können. Wenn diese Arbeit abgeschlossen ist, wird ein Rückruf in eine Warteschlange gestellt. Die Aufgabe der Ereignisschleife besteht darin, Rückrufe in der Warteschlange auf den Stapel zu verschieben, wenn dieser frei ist.

Stellen Sie sich einen Koch vor, der alleine arbeitet. Der Koch stellt ein Gericht in den Ofen und stellt einen Timer ein, anstatt darauf zu starren. Wenn der Timer klingelt, wird die Aufgabe auf eine Liste gesetzt und der Koch nimmt sie auf, nachdem er die aktuelle Aufgabe erledigt hat.

Die beweglichen Teile

Aufgaben werden manchmal Makrotasks genannt. Streng genommen kann es mehrere Aufgabenquellen geben, und die genauen Details unterscheiden sich je nach Umgebung.

Die Regeln

1. Führen Sie den gesamten synchronen Code aus, bis der Aufrufstapel leer ist.
2. Führen Sie alle Mikrotasks aus, einschließlich aller neu hinzugefügten.
3. Rendern Sie in einem Browser ein Update, falls eines fällig ist.
4. Nehmen Sie eine Aufgabe aus einer Warteschlange und führen Sie sie aus.
5. Gehen Sie zurück zu Schritt 2.

Das wichtigste Detail: alle Mikrotasks, dann eine Aufgabe. Die meisten Ereignisschleifenrätsel werden durch die Anwendung dieser einzigen Regel gelöst.

Siehe die Bestellung

console.log("1 sync");
setTimeout(() => console.log("5 timeout"), 0);
Promise.resolve().then(() => console.log("3 promise"));
queueMicrotask(() => console.log("4 microtask"));
console.log("2 sync");

// 1 sync
// 2 sync
// 3 promise
// 4 microtask
// 5 timeout

Hier ist, was passiert ist. Die beiden console.log Zeilen sind synchron, also liefen sie zuerst. Der Promise-Callback und queueMicrotask gingen in die Mikrotask-Warteschlange und wurden in der Reihenfolge ausgeführt, in der sie hinzugefügt wurden, sobald der Stapel leer war. Der Timer-Rückruf musste auf einen Task-Turn warten, obwohl seine Verzögerung Null war.

Mikrotasks laufen zwischen Timern

Nach jeder einzelnen Aufgabe wird die Microtask-Warteschlange wieder geleert. Dieses Beispiel beweist es:

setTimeout(() => {
  console.log("timer 1");
  Promise.resolve().then(() => console.log("promise inside timer 1"));
}, 0);
setTimeout(() => console.log("timer 2"), 0);

// timer 1
// promise inside timer 1
// timer 2

Das Versprechen, das während des ersten Timers erstellt wurde, wurde vor dem zweiten Timer ausgeführt. Moderne Browser und Node.js 11 und höher verhalten sich auf diese Weise.

Wo warten passt

await teilt eine Funktion in zwei Teile. Alles davor läuft synchron und alles danach ist als Mikrotask eingeplant. Das überrascht viele Menschen:

async function task() {
  console.log("A before await");
  await null;
  console.log("C after await");
}

task();
console.log("B after calling task");

// A before await
// B after calling task
// C after await

Eine async-Funktion startet nicht im Hintergrund. Es läuft im selben Thread, bis es seinen ersten await erreicht. Das gilt sogar, wenn man auf etwas wartet, das kein echtes Versprechen ist, wie zum Beispiel null. Weitere Informationen zu dieser Syntax finden Sie in unserem JavaScript-Async/Await-Leitfaden.

Blockieren der Schleife

Während synchroner Code ausgeführt wird, kann dies nichts anderes tun. Um dies zu zeigen, stellen wir einen Timer auf 0 ms und halten den Thread dann eine halbe Sekunde lang beschäftigt:

const start = Date.now();
setTimeout(() => console.log("timer ran after", Date.now() - start, "ms"), 0);
while (Date.now() - start < 500) {}

// timer ran after about 500 ms

Die Verzögerung des Timers ist ein Minimum und keine Garantie. Es wurde erst ausgeführt, als der Stapel frei wurde. Auf einer Webseite führt eine solche lange Schleife dazu, dass auf Klicks keine Reaktion erfolgt und die Animationen gestoppt werden. Auf einem Server muss jede andere Anfrage warten, weshalb ein langsamer synchroner Aufruf allen Benutzern eines Node.js-Prozesses schaden kann.

Zu den häufigsten Blockierungsursachen gehören große Schleifen, das Parsen sehr großer JSON-Dateien, synchrone Dateifunktionen wie readFileSync in Anforderungshandlern und katastrophale reguläre Ausdrücke.

Ansprechbar bleiben

Geben Sie der Ereignisschleife bei schwerer Arbeit eine Chance zum Atmen. Eine Möglichkeit besteht darin, ab und zu einen Timer anzuhalten, damit andere Aufgaben ausgeführt werden können:

const items = [0, 1, 2, 3, 4];

async function processAll() {
  for (const item of items) {
    if (item === 2) await new Promise((r) => setTimeout(r, 0));
    console.log("item", item);
  }
}

setTimeout(() => console.log("other work gets a turn"), 0);
processAll();

// item 0
// item 1
// other work gets a turn
// item 2
// item 3
// item 4

Der andere Timer lief in der Mitte, weil wir bei einer echten Aufgabe nachgegeben haben. Echter Code würde alle paar Elemente oder Millisekunden ergeben. Für wirklich CPU-intensive Arbeiten wie die Bildverarbeitung verwenden Sie einen Web Worker in Browsern oder einen Worker-Thread in Node.js, die auf separaten Threads ausgeführt werden.

Mikrotasking-Hunger

Da die Schleife die Mikrotask-Warteschlange vollständig leert, bevor sie fortfährt, kann eine Mikrotask, die immer mehr plant, alles andere stoppen. Wir haben dies mit 100.000 verketteten Mikrotasks getestet:

let count = 0;
let timerFired = false;
setTimeout(() => { timerFired = true; }, 0);

function spin() {
  count++;
  if (count < 100000) queueMicrotask(spin);
  else console.log("timer fired during microtasks?", timerFired);
}
queueMicrotask(spin);

// timer fired during microtasks? false

Der Timer konnte erst laufen, wenn alle fertig waren. Wenn diese Kette nie enden würde, würden die Timer nie ausgelöst und in einem Browser würde die Seite nie neu gezeichnet. Beachten Sie, dass das Nachgeben mit await bei einem gelösten Versprechen hier nicht hilft, da dadurch nur eine weitere Mikroaufgabe hinzugefügt wird. Sie benötigen eine echte Aufgabe, beispielsweise einen Timer, um anderen die Möglichkeit zu geben, an die Reihe zu kommen.

Rendern in Browsern

Ein Browser erhält normalerweise die Möglichkeit, zwischen Aufgaben zu malen. Das erklärt einen häufigen Fehler:

spinner.hidden = false;
doHeavyWork();              // blocks the thread
spinner.hidden = true;

Der Spinner erscheint nie, da der Browser keine Möglichkeit hatte, zwischen diesen Zeilen zu rendern. Um das Problem zu beheben, lassen Sie einen Rahmen passieren, bevor mit der schweren Arbeit begonnen wird, oder übertragen Sie diese Arbeit einem Arbeiter. Bei Code, der das Erscheinungsbild ändert, wird requestAnimationFrame direkt vor dem nächsten Mal ausgeführt, was es zum richtigen Werkzeug für Animationen macht.

Node.js-Unterschiede

Node.js verfügt über eine eigene Ereignisschleife mit mehreren Phasen, darunter Timer, I/O-Polling und setImmediate. Es verfügt auch über process.nextTick, das in einer eigenen Warteschlange ausgeführt wird. Folgendes haben wir gesehen, als wir diese innerhalb einer asynchronen Funktion ausgeführt haben:

setTimeout(() => console.log("timeout"), 0);
setImmediate(() => console.log("immediate"));
process.nextTick(() => console.log("nextTick"));
Promise.resolve().then(() => console.log("promise"));

// promise
// nextTick
// immediate
// timeout

In vielen Artikeln heißt es, dass nextTick Versprechen immer übertrifft und dass ein Timer besser ist als setImmediate. Unser Ergebnis zeigt, dass es nicht so einfach ist. Unser Code lief bereits innerhalb einer Mikrotask, also wurde die Promise-Warteschlange zuerst fortgesetzt. Und die Reihenfolge von setTimeout und setImmediate variiert bekanntermaßen je nachdem, woher sie aufgerufen werden. Schreiben Sie also keinen Code, der von der genauen Reihenfolge dieser Elemente abhängt. Wenn eine Sache nach der anderen passieren muss, verketten Sie sie explizit.

Interview-Quiz

Versuchen Sie, die Reihenfolge herauszufinden, bevor Sie die Antwort lesen:

console.log("a");
setTimeout(() => console.log("b"), 0);
Promise.resolve().then(() => {
  console.log("c");
  setTimeout(() => console.log("d"), 0);
  Promise.resolve().then(() => console.log("e"));
});
console.log("f");

Unser Lauf druckte a, f, c, e, b, d. Hier ist der Grund:

1. a und f sind synchron, daher werden sie zuerst ausgeführt.
2. Der Stapel ist leer, daher werden Mikrotasks ausgeführt: c, dann die neue Mikrotask e, in derselben Runde.
3. Jetzt eine Aufgabe: Timer b, die zuerst in die Warteschlange gestellt wurde.
4. Dann die nächste Aufgabe: Timer d, die während der Mikrotask in die Warteschlange gestellt wurde.

Häufige Fehler

• Denken setTimeout ist genau. Die Verzögerung ist nur minimal.
• Denken async bedeutet einen anderen Thread. Asynchroner Code wird zwischen Wartevorgängen immer noch im Hauptthread ausgeführt.
• Sleeps verwenden, um die Reihenfolge zu korrigieren. Das Warten auf den tatsächlichen Zustand ist weitaus zuverlässiger, was auch für unzuverlässige Tests gilt.
• Verwendung von forEach mit await. Es wird nicht zwischen Elementen gewartet. Siehe JavaScript-Array-Methoden.
• Schwere synchrone Arbeit in einem Server-Handler ausführen. Eine Anfrage kann jede andere Anfrage verzögern.

Fazit

Denken Sie an die Grundregel: Führen Sie den Stapel aus, bis er leer ist, führen Sie alle Mikrotasks aus, führen Sie dann eine Aufgabe aus und wiederholen Sie den Vorgang. Alles Weitere ergibt sich daraus. Damit es hängen bleibt, schreiben Sie Ihre eigene Version des obigen Quiz, sagen Sie das Ergebnis auf Papier voraus und führen Sie es dann durch. Wenn Sie etwas falsch machen und verstehen, warum, erfahren Sie mehr als jedes Diagramm.

Häufige Fragen

Lerne weiter