Die JavaScript-Ereignisschleife verstehen (einfach gemacht)

Die JavaScript-Ereignisschleife verstehen (einfach gemacht)

Die JavaScript-Ereignisschleife ermöglicht die asynchrone Programmierung in JavaScript. Hier ist eine einfache Erklärung!

---

? Schlüsselkonzepte

1. Single-Threaded

JavaScript kann immer nur eine Sache gleichzeitig ausführen, da es Single-Threaded ist.

console.log("Task 1");
console.log("Task 2");

? Ausgabe:

Task 1
Task 2

2. Synchron vs. Asynchron

• Synchronisierte Aufgaben: Der Reihe nach nacheinander ausführen.
• Asynchrone Aufgaben: Blockieren Sie nicht den Hauptthread; Sie warten, bis sie zum Laufen bereit sind.

console.log("Start");

setTimeout(() => {
  console.log("Async Task");
}, 1000);

console.log("End");

? Ausgabe:

Start
End
Async Task

---

? So funktioniert die Ereignisschleife

1. Anrufstapel

   • Der Ort, an dem Aufgaben einzeln ausgeführt werden.
   • Wenn eine Funktion ausgeführt wird, wird sie dem Stapel hinzugefügt. Wenn es fertig ist, wird es entfernt.

2. Web-APIs

   • Asynchrone Aufgaben (wie setTimeout) werden hier behandelt. Sie warten im Hintergrund.

3. Rückrufwarteschlange

   • Sobald die asynchrone Aufgabe abgeschlossen ist, wird ihr Rückruf zur Warteschlange hinzugefügt.

4. Ereignisschleife

   • Die Ereignisschleife prüft:
     1. Ist der Aufrufstapel leer?
     2. Wenn JA, werden Aufgaben aus der Rückrufwarteschlange übernommen und auf den Stapel verschoben.

---

✨ Beispiel: Schritt für Schritt

console.log("Start");

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

console.log("End");

1️⃣ Call Stack

Step	Call Stack	Notes
1	console.log	Logs "Start"
2	setTimeout	Registers timeout task
3	console.log	Logs "End"

2️⃣ Web-APIs

• setTimeout wechselt zu Web-APIs und startet den Timer.

3️⃣ Rückrufwarteschlange

• Nach 2000 ms wird der Rückruf (() => console.log("Timeout Task")) in die Warteschlange verschoben.

4️⃣ Ereignisschleife

• Die Ereignisschleife prüft, ob der Aufrufstapel leer ist.
• Der Rückruf wird auf den Stapel verschoben und ausgeführt.

? Endgültige Ausgabe:

Start
End
Timeout Task

---

? Visualisierung der Ereignisschleife

Um die Ereignisschleife wirklich zu verstehen, sehen Sie sich diese Ressourcen an:

• Lupe
• MDN: Parallelitätsmodell

Viel Spaß beim Codieren! ?

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