Grundlegendes zu synchronem und asynchronem JavaScript - Teil 1

Synchron und asynchron sind verwirrende Konzepte in JavaScript, insbesondere für Anfänger. Zwei oder mehr Dinge sind es synchron wenn sie gleichzeitig passieren (synchron) und asynchron, wenn dies nicht der Fall ist (nicht synchron).

Obwohl diese Definitionen leicht zu verstehen sind, sind sie tatsächlich komplizierter als es aussieht. Wir müssen berücksichtigen was genau synchron ist, und was nicht.

Sie würden wahrscheinlich einen anrufen normal Funktion in JavaScript synchron, richtig? Und wenn es sowas ist setTimeout () oder AJAX, mit dem Sie arbeiten, bezeichnen Sie es als asynchron, ja? Was ist, wenn ich dir das sage? beide sind in gewisser Weise asynchron?

Um das zu erklären Warum, Wir müssen Herrn X um Hilfe bitten.

Szenario 1 - Herr X versucht Synchronizität

Hier ist das Setup:

1. Herr X ist jemand, der schwierige Fragen beantworten und jede gewünschte Aufgabe ausführen kann.
2. Die einzige Möglichkeit, mit ihm Kontakt aufzunehmen, ist ein Anruf.
3. Welche Frage oder Aufgabe auch immer Sie haben, um Herrn X um Hilfe zu bitten; Du rufst ihn an.
4. Herr X gibt Ihnen die Antwort oder erledigt die Aufgabe jetzt sofort, und lässt dich wissen es ist fertig.
5. Sie legen den Inhalt des Empfängers ab und gehen einen Film aus.

Was Sie gerade ausgeführt haben, war a synchrone Kommunikation (hin und her) mit Herrn X. Er hörte zu, als Sie ihm Ihre Frage stellten, und Sie hörten zu, als er sie beantwortete.

Szenario 2 - Herr X ist mit Synchronizität nicht zufrieden

Da Herr X so effizient ist, erhält er viel mehr Anrufe. Also was passiert wenn man ihn doch anruft er ist schon beschäftigt mit jemand anderem reden? Sie können ihm Ihre Frage nicht stellen - nicht, bis er Ihren Anruf entgegennehmen kann. Sie hören nur einen Besetztton.

Was kann Herr X dagegen unternehmen??

Statt direkt Anrufe anzunehmen:

1. Herr X stellt einen neuen Mann ein, Herr M. und gibt ihm einen Anrufbeantworter für die Anrufer Nachrichten hinterlassen.
2. Herr M. hat die Aufgabe zu tun Nachricht weiterleiten vom Anrufbeantworter bis zu Herrn X, sobald er weiß, dass Herr X alle vorherigen Nachrichten vollständig verarbeitet hat und bereits ist frei, einen neuen zu nehmen.
3. Wenn Sie ihn also anrufen, anstatt einen Besetztton zu erhalten, können Sie eine Nachricht für Herrn X hinterlassen Warten Sie, bis er Sie zurückruft (noch keine Filmzeit).
4. Sobald Herr X alle in der Warteschlange befindlichen Nachrichten beendet hat, die er vor Ihren erhalten hat, wird er sich mit Ihrem Problem befassen und Ruf dich zurück um dir eine antwort zu geben.

Nun stellt sich die Frage: waren die Aktionen so weit synchron oder asynchron?

Es ist gemischt Wenn Sie Ihre Nachricht hinterlassen haben, Herr X hörte nicht zu, also war die vierte Kommunikation asynchron.

Aber als er antwortete, du warst da und hast zugehört, welche macht die Rückkommunikation synchron.

Ich hoffe, Sie haben inzwischen ein besseres Verständnis dafür gewonnen, wie Synchronizität in Bezug auf Kommunikation wahrgenommen wird. Zeit, JavaScript einzubringen.

JavaScript - eine asynchrone Programmiersprache

Wenn jemand JavaScript asynchron bezeichnet, beziehen sich die Benutzer im Allgemeinen darauf, wie Sie dies tun können hinterlass eine Nachricht dafür und Ihr Anruf wurde nicht blockiert mit einem Besetztton.

Die Funktionsaufrufe sind nie direkt in JavaScript, Sie sind buchstäblich fertig über Nachrichten.

JavaScript verwendet eine Nachrichtenwarteschlange wo eingehende Nachrichten (oder Ereignisse) gehalten werden. Ein Ereignisschleife (ein Nachrichtenverteiler) sendet diese Nachrichten sequentiell an a Aufrufstack wo die entsprechenden Funktionen der Nachrichten sind als Frames gestapelt (Funktionsargumente & Variablen) zur Ausführung.

Der Aufrufstapel enthält den Rahmen der aufgerufenen Anfangsfunktion und alle anderen Rahmen für aufgerufene Funktionen über verschachtelte Anrufe oben drauf .

Wenn eine Nachricht in die Warteschlange aufgenommen wird, wartet sie, bis der Aufrufstapel aktiv ist leer von allen Frames der vorherigen Nachricht, und wenn es ist, die Ereignisschleife löscht die vorherige Nachricht, und fügt die entsprechenden Frames der aktuellen Nachricht dem Aufrufstapel hinzu.

Die Nachricht wartet erneut, bis der Aufrufstapel geworden ist leer von seinen eigenen entsprechenden Frames (d. h. die Ausführungen aller gestapelten Funktionen sind beendet), dann wird die Warteschlange entfernt.

Betrachten Sie den folgenden Code:

 function foo ()  Funktionsleiste () foo ();  function baz () bar ();  baz (); 

Die Funktion wird ausgeführt baz () (in der letzten Zeile des Code-Snippets) Eine Nachricht wird der Warteschlange hinzugefügt, und wenn die Ereignisschleife es abholt, der Aufrufstapel beginnt das Stapeln von Frames zum baz (), Bar(), und foo () an den relevanten Ausführungspunkten.

Sobald die Ausführung der Funktionen nacheinander abgeschlossen ist, werden ihre Rahmen angezeigt aus dem Aufrufstapel entfernt, während die Nachricht ist immer noch in der Schlange warten, bis um baz () wird aus dem Stapel geworfen.

Denken Sie daran, dass die Funktionsaufrufe sind nie direkt in JavaScript, Sie sind fertig über Nachrichten. Immer wenn Sie jemanden sagen hören, dass JavaScript selbst eine asynchrone Programmiersprache ist, gehen Sie davon aus, dass es sich um die integrierte Sprache handelt “Antwortmaschine”, und wie du Nachrichten frei hinterlassen kannst.

Aber was ist mit den spezifischen asynchronen Methoden??

Bisher habe ich mich nicht mit APIs wie befasst setTimeout () und AJAX, das sind diejenigen, die es sind speziell als asynchron bezeichnet. Warum das?

Es ist wichtig zu verstehen, was genau synchron oder asynchron ist. JavaScript kann mit Hilfe von Ereignissen und der Ereignisschleife üben asynchrone Verarbeitung von Nachrichten, aber das bedeutet nicht alles in JavaScript ist asynchron.

Denken Sie daran, ich habe Ihnen gesagt, dass die Nachricht nicht vor dem Anrufstapel abgegangen ist leer von den entsprechenden Frames, so, als ob Sie nicht erst zu einem Film gegangen wären, bis Sie Ihre Antwort erhalten haben - das ist synchron sein, du wartest dort bis die Aufgabe abgeschlossen ist, und du bekommst die Antwort.

Warten ist nicht in allen Szenarien ideal. Was ist, wenn Sie nach dem Hinterlassen einer Nachricht anstelle des Wartens den Film verlassen können? Was ist, wenn eine Funktion in den Ruhestand gehen kann (den Aufrufstapel leert) und die Nachricht auch noch vor der Aufgabe der Funktion in die Warteschlange gestellt werden kann? Was ist, wenn Sie Code asynchron ausführen lassen können?

Dies ist, wo APIs wie setTimeout () und AJAX kommen ins Bild, und was sie tun, ist… halt, ich kann das nicht erklären, ohne zu Herrn X zurückzukehren, was wir im zweiten Teil dieses Artikels sehen werden. Bleib dran.