Die Ereignisschleife in JavaScript verstehen – ganz einfach!

JavaScript ist eine der beliebtesten Programmiersprachen und macht rund 90 % aller Websites im Web aus! Eines der kniffligsten und am meisten missverstandenen Konzepte ist jedoch die Funktionsweise der Ereignisschleife. Hier finden Sie eine einfache Erklärung für Ereignisschleife, Aufgabenwarteschlange, Aufrufstapel, Mikrotask-Warteschlange und Web-APIs.

Was macht JavaScript besonders?

JavaScript ist eine Single-Threaded-Sprache. Dies bedeutet, dass eine Sache gleichzeitig verarbeitet wird, im Gegensatz zu Sprachen wie C oder Go, die mehrere Dinge gleichzeitig verarbeiten können. Damit asynchrone Aufgaben wie das Abrufen von Daten oder das Ausführen von Timern reibungslos funktionieren, verwendet JavaScript eine sogenannte Ereignisschleife!

1. Was sind Web-APIs?

Web-APIs sind zusätzliche Tools, die vom Browser oder Node.js bereitgestellt werden, um Aufgaben wie das Stellen von Netzwerkanfragen (mit Fetch), das Festlegen von Timern (setTimeout) oder den Zugriff auf den Benutzerstandort (mithilfe von ) zu erledigen Geolocation-API). Diese Aufgaben werden außerhalb des Haupt-JavaScript-Threads ausgeführt.

Beispiel:

setTimeout(() => {
  console.log("Timer done!");
}, 2000);

Hier verwaltet der Browser den Timer, während das Haupt-JavaScript weiterhin anderen Code ausführt.

2. Was ist die Aufgabenwarteschlange?

In der Aufgabenwarteschlange warten Rückruffunktionen von Web-APIs, Ereignis-Listenern und anderen verzögerten Aktionen, bis JavaScript zur Ausführung bereit ist. Diese Aufgaben warten in der Schlange darauf, an die Reihe zu kommen.

Stellen Sie sich das wie eine Warteschlange in einem Geschäft vor. Jede Aufgabe wird von der Ereignisschleife verarbeitet, wenn JavaScript mit der aktuellen Aufgabe fertig ist.

3. Was ist der Call Stack?

Der Aufrufstapel ist der Ort, an dem JavaScript Funktionsaufrufe verfolgt. Wenn Sie eine Funktion aufrufen, wird sie auf den Stapel verschoben. Wenn es fertig ist, ist es abgeplatzt. JavaScript verarbeitet Aufgaben in der Reihenfolge, in der sie im Stapel erscheinen, es ist von Natur aus synchron.

4. Was ist die Ereignisschleife?

Die Ereignisschleife ist wie ein Verkehrspolizist, der alles in Bewegung hält. Es prüft ständig, ob der Aufrufstapel leer ist, und wenn ja, verschiebt es Aufgaben aus der Aufgabenwarteschlange oder Mikrotaskwarteschlange zur Ausführung auf den Stapel. Dadurch kann JavaScript asynchronen Code verarbeiten, ohne den Hauptthread zu blockieren.

Beispiel einer Ereignisschleife in Aktion

setTimeout(() => {
  console.log("2000ms");
}, 2000);

setTimeout(() => {
  console.log("100ms");
}, 100);

console.log("End");

Was passiert hier?

Lassen Sie es uns aufschlüsseln:

1. „Ende“ wird sofort protokolliert, da es synchron ist und im Aufrufstapel läuft.
2. Der setTimeout mit 100ms wird von der Web API verarbeitet. Nach 100 ms wird der Rückruf in die Aufgabenwarteschlange verschoben.
3. SetTimeout mit 2000 ms macht dasselbe, aber sein Rückruf wird nach 2000 ms in die Aufgabenwarteschlange verschoben.
4. Die Ereignisschleife verschiebt zuerst den 100-ms-Rückruf in den Aufrufstapel, dann den 2000-ms-Rückruf.

5. Was ist die Microtask-Warteschlange?

Die Microtask Queue ist eine spezielle Warteschlange für Aufgaben, die vor der Aufgabenwarteschlange verarbeitet werden. Mikroaufgaben kommen von Dingen wie Promises oder Mutationsbeobachtern. Die Ereignisschleife überprüft immer die Mikrotask-Warteschlange vor der Aufgabenwarteschlange.

Mikrotask-Beispiel mit Versprechen

console.log("Start");

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

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

console.log("End");

Was passiert hier?

1. „Start“ wird sofort protokolliert.
2. Der setTimeout-Rückruf wird in die Aufgabenwarteschlange gestellt.
3. Die Promise-Auflösung wird in die Mikrotask-Warteschlange gestellt.
4. „Ende“ wird protokolliert.
5. Die Ereignisschleife überprüft die Mikrotask-Warteschlange und führt den Promise-Rückruf aus.
6. Schließlich verarbeitet die Aufgabenwarteschlange den setTimeout-Rückruf.

Ausgabe:

Start
End
Promise
Timeout

Visuelle Darstellung

Alles zusammenfassen

So passt alles zusammen:

1. Web-APIs verarbeiten asynchrone Aufgaben wie Timer außerhalb des Hauptthreads.
2. Die Ereignisschleife verschiebt Aufgaben aus der Aufgabenwarteschlange oder Mikrotaskwarteschlange in den Aufrufstapel.
3. Mikrotasks (wie Versprechen) werden zuerst bearbeitet, vor Aufgaben in der Aufgabenwarteschlange.

Das obige ist der detaillierte Inhalt vonDie Ereignisschleife in JavaScript verstehen – ganz einfach!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!