Asynchrone Operationen in JavaScript: Die Ereignisschleife

Einführung
JavaScript ist standardmäßig synchron
Synchrone vs. asynchrone Operationen
Die Ereignisschleife
Wie es funktioniert
Bedeutung der Ereignisschleife
Fazit

---

Einführung

Stellen Sie sich Folgendes vor: Sie haben gerade eine Webanwendung entwickelt, die Daten von einem Server abrufen, die Benutzeroberfläche aktualisieren und in Echtzeit auf alle Benutzeraktionen reagieren muss, aber Sie machen sich Sorgen, ob Ihr Code dies auch tun wird in der Lage, diese Aufgaben effizient zu bewältigen. Kein Grund zur Sorge, hier kommt die Ereignisschleife ins Spiel.

In diesem Artikel gehe ich auf die Funktionsweise der Ereignisschleife, die Unterschiede zwischen synchronen und asynchronen Vorgängen in JavaScript und die Bedeutung der Ereignisschleife als notwendige nicht blockierende Architektur ein.

Javascript ist standardmäßig synchron

Standardmäßig ist Javascript synchron und der Code wird sequentiell in der Reihenfolge von oben nach unten gelesen. Da JS Single-Threaded ist, muss jede Aufgabe auf den Abschluss der vorherigen Aufgabe warten, bevor mit der nächsten fortgefahren wird. Das bedeutet, dass jede Codezeile einzeln verarbeitet wird und jeweils nur eine Operation/Funktion ausgeführt wird.

In JavaScript gibt es keine Möglichkeit, mehrere Codeteile parallel auszuführen, und jeder Versuch, Parallelität in einer Sprache zu erreichen, die im Kern synchron und Single-Threaded ist, ist ehrgeizig. Wenn Sie die synchrone Natur von JavaScript verstehen, können Sie erkennen, wie Webanwendungen auf Benutzerinteraktionen reagieren und Aufgaben erledigen.

function greet(name) {
    return `Hello, ${name}!`;
}

const greeting = greet("Deb");
console.log(greeting);                                                 

In diesem Beispiel führt Javascript den Code in der Reihenfolge aus, in der er geschrieben wurde. Die Funktion „greet“ wird mit dem Argument „Deb“ aufgerufen. Die Funktion gibt dann eine Begrüßungszeichenfolge zurück, die dann in der Konsole protokolliert wird.

Ausgabe:

Hello, Deb!

Jede Zeile wartet vor der Ausführung auf den Abschluss der vorherigen Zeile. Daher muss die Funktion abgeschlossen sein, bevor das Ergebnis „Begrüßung“ zugeordnet werden kann.

Synchrone vs. asynchrone Operationen

Bevor ich mich mit der Ereignisschleife befasse, werde ich kurz darauf eingehen, was asynchrone Vorgänge sind und welche Unterschiede zwischen synchronen und asynchronen Vorgängen in JavaScript bestehen. Asynchrone Operationen sind Aktivitäten, die unabhängig von einem Programmablauf ausgeführt werden.

Wie bereits erwähnt, ist Javascript standardmäßig synchron und synchroner Code erzeugt ein blockierendes Verhalten, bei dem jede Aufgabe/Funktion beendet werden muss, bevor die nächste beginnt.

Andererseits blockieren asynchrone Vorgänge nicht die Ausführung nachfolgender Vorgänge und ermöglichen es Javascript, sich um andere Aufgaben zu kümmern, während es auf den Abschluss dieser bestimmten asynchronen Aufgabe wartet. Einfach ausgedrückt: Wenn Sie eine Funktion als asynchron (asynchron) deklarieren, bedeutet dies, dass die Funktion über Code verfügt, der Zeit zum Abschluss benötigt, und dass eine solche Funktion zurückgestellt wird, während der synchrone Code zuerst ausgeführt wird.

Da es keine Blockierung gibt, kann der nächste synchrone Code ausgeführt werden, ohne den vorherigen asynchronen Code zu beenden, und jeder asynchrone Code, der zur Ausführung bereit ist, wird in der Ereigniswarteschlange eingereiht.

// Synchronous code
console.log("Step 1");
console.log("Step 2");

Denken Sie daran, dass synchroner Code Zeile für Zeile ausgeführt wird. Hier führt JavaScript die Anweisungen in der Reihenfolge aus, in der sie geschrieben wurden.

Ausgabe:

Step 1
Step 2

Andererseits ermöglicht asynchroner Code die weitere Ausführung von JavaScript, während auf den Abschluss eines Vorgangs gewartet wird.

// Asynchronous code
console.log("1st Function");

setTimeout{function(){ // WEB API
  console.log("2nd Function");
},2000);

console.log("3rd Function");

Ausgabe:

1st Function
3rd Function
2nd Function

Da die erste und dritte Funktion synchron sind, werden sie zuerst ausgeführt, während die zweite Funktion aus dem Aufrufstapel entfernt und von der Web-API verarbeitet wird. Die Web-API weist es asynchron an, 2000 ms zu warten, bevor es in die Ereigniswarteschlange gestellt wird, die anschließend von der Ereignisschleife wieder in den leeren Aufrufstapel gestellt und schließlich ausgeführt wird.

Die Ereignisschleife

In ihrer einfachsten Definition ist die Ereignisschleife eine Möglichkeit, asynchrone Ereignisse synchron zu verarbeiten.

In einer ausführlicheren Definition ist die Ereignisschleife eine kontinuierlich laufende Codeschleife in der Javascript-Laufzeit, die es ermöglicht, bei Bedarf asynchrone Vorgänge auszuführen. Dies bedeutet, dass das eingeschränkte Design von JavaScript viele Aufgaben effizient bewältigen kann.

Es dreht sich und bleibt in Ihrem Code-Hintergrund, bis bestimmte JavaScript-Aufgaben ausgeführt werden müssen. Wenn Sie beispielsweise auf eine Schaltfläche klicken, der Code von einem Click-Event-Handler zugeordnet ist, oder wenn Sie eine externe Datei laden, verbleibt in solchen Fällen die Ereignisschleife im Inneren der Javascript-Laufzeitumgebung, um bei Bedarf beliebigen Javascript-Code auszuführen.

Dies alles bedeutet, dass JavaScript zwar Single-Threaded ist, die Ereignisschleife jedoch den Anschein erweckt, dass JavaScript in der Lage ist, Dinge asynchron auszuführen, indem es Dinge auf APIs auslagert und die eingehenden Ereignisse verarbeitet, wenn dies möglich ist.

Bevor ich erkläre, wie die Ereignisschleife funktioniert, müssen Sie einige spezifische Konzepte innerhalb der JavaScript-Laufzeit verstehen:

• Aufrufstapel: Ein Aufrufstapel verfolgt, welche Funktionen aufgerufen werden und in welcher Reihenfolge sie ausgeführt werden. Es führt synchronen Code in sequentieller Reihenfolge aus.

• Web-APIs: Dies sind die Tools, die asynchrone Aufgaben verarbeiten.

• Rückruf: Dies ist eine Funktion, die als Argument an eine andere Funktion übergeben wird. Es hilft, Code als Reaktion auf ein Ereignis auszuführen.

• Ereignis-/Rückrufwarteschlange: Hier werden Aufgaben gespeichert, die darauf warten, ausgeführt zu werden, sobald der Aufrufstapel leer ist.

Wie es funktioniert

Der Aufrufstapel führt synchronen Code aus, bis er leer ist. Wenn dem Aufrufstapel ein asynchroner Code hinzugefügt wird, wird er an die API übertragen, die dann die Aufgabe verarbeitet, bevor sie an die Ereigniswarteschlange gesendet wird.

Rückrufe/Funktionen, die von der API abgeschlossen wurden, werden zur Ereigniswarteschlange hinzugefügt und die Ereignisschleife sucht ständig in der Ereigniswarteschlange, um zu sehen, ob es ein neues Ereignis/eine neue Aufgabe gibt, auf die Javascript reagieren muss.

Beachten Sie, dass JavaScript nicht auf die Ereignisse reagieren kann, bis der Aufrufstapel leer ist. Sobald der Aufrufstapel leer ist, holt sich die Ereignisschleife daher das Ereignis aus der Warteschlange und platziert es im Aufrufstapel, damit es wie andere reguläre Funktionen ausgeführt wird.

Bedeutung der Ereignisschleife

• Es sorgt dafür, dass Ihr Code reagiert, während Aufgaben im Hintergrund ausgeführt werden.

• Es hilft Ihnen, Ihre Aufgaben effektiv zu verwalten, indem es die Anrufstapel und die Rückrufwarteschlange überwacht.

• Es bietet eine Problemumgehung für JavaScript, um nicht blockierende Vorgänge auszuführen, bei denen mehrere Aufgaben gleichzeitig bearbeitet werden können.

• Es verhindert, dass Ihr Programm in die Callback-Hölle gerät. Die Callback-Hölle entsteht, wenn mehrere Callbacks ineinander verschachtelt sind, was das Lesen oder Warten des Codes erschwert.

Abschluss

Das Verhalten der Ereignisschleife bestimmt, wann Code in Ihrer Anwendung ausgeführt wird. Je mehr Wissen Sie über die Verwendung und Notwendigkeit der Ereignisschleife haben, desto besser können Sie verstehen, warum Ihr Code ausgeführt wird, wenn er ausgeführt wird.

Viel Spaß beim Programmieren, beste Freunde!

Das obige ist der detaillierte Inhalt vonAsynchrone Operationen in JavaScript: Die Ereignisschleife. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!