JavaScript ist Single-Threaded, behandelt aber asynchrone Operationen, ohne die Ereignisschleife und die Callback-Warteschlangen zu blockieren. 1) Der Anrufstack führt Funktionen in der Reihenfolge aus. 2) Web -APIs erledigen asynchronisierte Aufgaben wie Timer und HTTP -Anforderungen. 3) Abgeschlossene asynchronisierte Rückrufe gehen entweder zum Makrotask -Warteschlange (z. B. SetTimeout) oder zur Microtask -Warteschlange (z. B. Versprechen). 4) Die Ereignisschleife prüft, ob der Anrufstapel leer ist, und priorisiert dann Mikrotasks über Makrotasks. 5) Selbst mit einer 0 -ms -Verz?gerung warten SetTimeout -Rückrufe, bis die Warteschlange von Stack und Mikrotask gel?scht wird. Deshalb wird Console.log ("2") in einem SetTimeout nach Versprechen ausgeführt. Dieser Mechanismus sorgt für nicht blockierendes Verhalten und h?lt gleichzeitig die Vorhersehbarkeit der Ausführungsreihenfolge auf.

JavaScript ist Single-Threaded, was bedeutet, dass es jeweils nur eine Sache tun kann. Wir alle wissen jedoch, dass JavaScript asynchrone Vorg?nge wie setTimeout , HTTP -Anforderungen und Benutzerinteraktionen abwickeln kann - alles ohne den Browser einfrieren. Diese Magie wird durch die Ereignisschleife und die Callback -Warteschlange (auch als Task -Warteschlange) erm?glicht. Lassen Sie es uns in einfachen Worten aufschlüsseln.

Wie die Ereignisschleife JavaScript nicht blockiert h?lt

Wenn Sie den JavaScript -Code ausführen, wird er in einer bestimmten Reihenfolge ausgeführt. Aber wenn asynchrone Operationen ins Spiel kommen - wie setTimeout oder fetch - blockieren sie den Rest des Codes nicht. So wie: wie:

1. Rufen Sie Stack an - hier werden Funktionen ausgeführt. Es ist eine Stapeldatenstruktur: Last in, First Out.
2. Web -APIs - Diese werden vom Browser (nicht Teil von JavaScript selbst) bereitgestellt und behandeln Dinge wie Timer, HTTP -Anforderungen, DOM -Ereignisse usw.
3. Callback -Warteschlange (Task -Warteschlange) - Wenn ein asynchronisierter Betrieb beendet ist (z. B. ein setTimeout -Timer), wird der Rückruf hier platziert und darauf wartet, ausgeführt zu werden.
4. Ereignisschleife - Dies überprüft st?ndig, ob der Anrufstapel leer ist. Wenn dies der Fall ist, schiebt es den ersten Rückruf aus der Warteschlange auf den Stapel.

Die Schlüsselregel: Die Ereignisschleife verschiebt nur einen Rückruf aus der Warteschlange zum Stapel, wenn der Stapel vollst?ndig leer ist.

Beispiel, um den Fluss zu veranschaulichen

 console.log ("1");

setTimeout (() => {
  console.log ("2");
}, 0);

console.log ("3");

Sie k?nnten erwarten, dass dies 1 , 2 , 3 druckt - aber es druckt tats?chlich:

 1
3
2

Hier ist der Grund:

• "1" wird sofort protokolliert (Anrufstapel).
• setTimeout hei?t - der Browser startet einen 0 -ms -Timer in der Web -API.
• "3" wird als n?chstes angemeldet, weil es synchron ist.
• Erst nach dem gesamten Hauptskript überprüft die Ereignisschleife die Rückrufwarteschlange.
• Der Timer vervollst?ndigt (fast sofort), so dass sein Rückruf in die Warteschlange geht.
• Wenn der Stapel jetzt leer ist, nimmt die Event Loop den Rückruf auf und protokolliert "2" .

Selbst bei einer Verz?gerung von 0 ms muss der setTimeout -Rückruf warten, bis die aktuelle Ausführung abgeschlossen ist.

Mikrotasks gegen Makrotasks: Die Priorit?tswarteschlange

Nicht alle Rückrufe werden gleich behandelt. JavaScript unterscheidet zwischen:

• MACROTASKS - setTimeout , setInterval , setImmediate , E/A, UI -Rendering.
• Microtasks - Promise.then/catch/finally queueMicrotask , MutationObserver .

Mikrotasks haben eine h?here Priorit?t. Nach jeder Makrotask führt die Ereignisschleife alle Mikrotasks aus, bevor sie zur Warteschlange Makrotask zurückkehrt.

Beispiel mit Versprechen

 console.log ("1");

setTimeout (() => {
  console.log ("2");
}, 0);

Promise.resolve (). Dann (() => {
  console.log ("3");
});

console.log ("4");

Ausgabe:

 1
4
3
2

Warum?

• 1 und 4 Log sofort.
• Das Promise.then Dann geht der Rückruf in die Warteschlange für Mikrotask .
• Nach dem Hauptskript verarbeitet die Ereignisschleife alle Mikrotasks - also 3 Protokolle vor 2 .
• Dann bewegt es sich in die Makrotask -Warteschlange und protokolliert 2 .

Dieses Priorit?tssystem bedeutet, dass Mikrotasks Makrotasks verz?gern k?nnen , was für die Leistung und Vorhersehbarkeit wichtig ist.

Key Takeaways

• JavaScript ist Single-Threaded, aber die Web-APIs des Browsers verarbeiten asynchronen Vorg?nge hinter den Kulissen.
• Die Event -Schleife überwacht den Anrufstack und die Callback -Warteschlangen.
• Rückrufe von setTimeout , setInterval und ?hnlich gehen in die Makrotask -Warteschlange .
• Versprechen und queueMicrotask gehen zur Microtask -Warteschlange , die vor dem n?chsten Makrotask verarbeitet wird.
• Nichts in den Callback -Warteschlangen wird ausgeführt, bis der Anrufstapel leer ist.

Das Verst?ndnis dieses Flusses hilft zu erkl?ren, warum sich Async Code so verh?lt, wie er es tut - und warum Sie JavaScript mit setTimeout(..., 0) nicht wirklich "innehalten" k?nnen.

Grunds?tzlich ist es keine Magie - es ist die Event -Loop, die ihren Job macht.

Das obige ist der detaillierte Inhalt vonVerst?ndnis der JavaScript -Ereignisschleife und der Callback -Warteschlange. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!