Synchronisation und Asynchronität in js verstehen

Der Inhalt, der in diesem Artikel mit Ihnen geteilt wird, befasst sich mit dem Verständnis von Synchronisation und Asynchronität in js. Er hat einen gewissen Referenzwert.

Sie sollten wissen, dass die Javascript-Sprache eine ist „Single-Threaded“-Sprache ist nicht wie die Java-Sprache. Die Klasse erbt Thread und verwendet dann thread.start, um einen Thread zu öffnen. einfach A ist nur ein Fließband, entweder bei der Verarbeitung oder beim Verpacken, und kann nicht mehrere Aufgaben und Prozesse gleichzeitig ausführen.

Was genau sind also die hier erwähnten synchronen und asynchronen? Wenn Sie es wirklich nicht verstehen, hoffe ich, dass Sie diesen Artikel sorgfältig lesen. Tatsächlich bin ich persönlich der Meinung, dass die offiziellen js-Dokumente nicht korrekt sind, wenn zwei Wörter verwendet werden, darunter viele andere Wörter, die nur anspruchsvoll klingen, aber die tatsächliche Anwendung scheint nichts mit diesen Wörtern zu tun zu haben. Wenn Sie beispielsweise das Wort „Event-Delegierter“ nicht kennen, wer kann dann auf den ersten Blick erkennen, was „Event-Delegierter“ bedeutet? Welche Veranstaltung wird delegiert? Was für eine Delegation? Ich denke, es ist besser, es einfach „Erfassung von Ereignissen in äußeren Elementen“ zu nennen. Obwohl es etwas länger ist, kann man es sofort verstehen.

Zurück auf den richtigen Weg, „Synchronizität“ – erinnert die Menschen sofort an das Wort „zusammen“; im wahrsten Sinne des Wortes scheint es etwas auf unterschiedliche (unterschiedliche) Weise zu tun. Das erste Wort, das einem einfällt Geist könnte sein „während...während...“, zum Beispiel: „Xiao Ming isst gleichzeitig Eis und macht Hausaufgaben.“ Daran ist nichts auszusetzen, nachdem er sein Eis gegessen hat Hausaufgaben. Ist das asynchron? Das wäre ein großer Fehler!

Tatsächlich gibt es synchron und asynchron, egal was passiert, es gibt nur eine Pipeline (einzelner Thread), wenn Dinge ausgeführt werden Der Unterschied zwischen synchron und asynchron liegt in der Ausführungsreihenfolge jedes Prozesses auf dieser Pipeline. Anders.

Die grundlegendsten asynchronen Funktionen sind die Funktionen setTimeout und setInterval, die sehr verbreitet sind, aber nur wenige wissen, dass dies tatsächlich asynchron ist, da sie die Ausführungsreihenfolge von js steuern können. Wir können auch einfach verstehen, dass Operationen, die die normale Ausführungssequenz des Programms ändern können, als asynchrone Operationen betrachtet werden können. Der folgende Code:

<script type="text/javascript">
        console.log( "1" );
        setTimeout(function() {
            console.log( "2" )
        }, 0 );
        setTimeout(function() {
            console.log( "3" )
        }, 0 );
        setTimeout(function() {
            console.log( "4" )
        }, 0 );
        console.log( "5" );
</script>

Wie ist die Ausgabereihenfolge?

Es ist ersichtlich, dass wir zwar die Wartezeit in setTimeout(function, time) auf 0 setzen, die darin enthaltene Funktion jedoch später noch ausgeführt wird.

Die API-Dokumentation des Firefox-Browsers enthält diesen Satz: Weil obwohl setTimeout war Wird er mit einer Verzögerung von Null aufgerufen, wird er in eine Warteschlange gestellt und zur Ausführung bei der nächsten Gelegenheit und nicht sofort eingeplant. Der derzeit ausgeführte Code muss abgeschlossen werden, bevor Funktionen in der Warteschlange ausgeführt werden. Die resultierende Ausführungsreihenfolge ist möglicherweise nicht wie erwartet.

bedeutet: Auch wenn die Zeitverzögerung von setTimeout 0 ist, wird die Funktion in eine Warteschlange gestellt und wartet auf die nächste Gelegenheit, ausgeführt zu werden, der aktuelle Code (referenziert bis Nicht erforderlich, um einem Programm in einer Warteschlange beizutreten) muss abgeschlossen werden, bevor das Programm in dieser Warteschlange abgeschlossen wird, daher sind die Ergebnisse möglicherweise nicht die gleichen wie erwartet.

Hier sprechen wir von einer „Warteschlange“ (d. h. einer Aufgabenwarteschlange). Was in der Warteschlange platziert wird, ist die Funktion in setTimeout ist unter allen Funktionen in der Warteschlange Das Programm wird ausgeführt, nachdem der gesamte Code außerhalb der Warteschlange ausgeführt wurde. Denn beim Ausführen eines Programms verwendet der Browser standardmäßig Methoden wie setTimeout und Ajax-Anforderungen als zeitaufwändige Programme (obwohl sie möglicherweise nicht zeitaufwändig sind) und fügt sie einer Warteschlange hinzu, bei der es sich um eine zeitaufwändige Warteschlange handelt Programme: Nachdem alle nicht zeitaufwändigen Programme ausgeführt wurden, werden die Programme in der Warteschlange der Reihe nach ausgeführt.

Zurück zum ursprünglichen Ausgangspunkt – Javascript ist Single-Threaded. Ein einzelner Thread bedeutet, dass alle Aufgaben in die Warteschlange gestellt werden müssen und die nächste Aufgabe erst ausgeführt wird, wenn die vorherige Aufgabe abgeschlossen ist. Wenn die vorherige Aufgabe lange dauert, muss die nächste Aufgabe warten. Es gibt also ein Konzept – die Aufgabenwarteschlange. Wenn die Warteschlange auf einen großen Rechenaufwand zurückzuführen ist und die CPU zu beschäftigt ist, vergessen Sie es, aber oft ist die CPU im Leerlauf, weil die E/A-Geräte (Eingabe- und Ausgabegeräte) sehr langsam sind (z. B. lesen Ajax-Operationen Daten aus). das Netzwerk) und müssen warten, bis die Ergebnisse vorliegen, bevor Sie fortfahren. Daher erkannten die Designer der JavaScript-Sprache, dass der Hauptthread zu diesem Zeitpunkt das E/A-Gerät vollständig ignorieren, die wartenden Aufgaben anhalten und die späteren Aufgaben zuerst ausführen konnte. Warten Sie, bis das E/A-Gerät das Ergebnis zurückgibt, gehen Sie dann zurück und fahren Sie mit der Ausführung der angehaltenen Aufgabe fort.

Daher können alle Aufgaben in zwei Typen unterteilt werden, einer ist eine synchrone Aufgabe (synchron) und der andere ist eine asynchrone Aufgabe (asynchron). Synchrone Aufgaben beziehen sich auf Aufgaben, die zur Ausführung im Hauptthread in die Warteschlange gestellt werden. Die nächste Aufgabe kann erst ausgeführt werden, nachdem die vorherige Aufgabe ausgeführt wurde. Erst wenn die Haupt-Thread-Aufgabe abgeschlossen ist und die „Aufgabenwarteschlange“ beginnt, den Haupt-Thread zu benachrichtigen und die Ausführung der Aufgabe anzufordern, wird die Aufgabe zur Ausführung in den Haupt-Thread eingegeben.

Im Einzelnen ist der asynchrone Betriebsmechanismus wie folgt:

(1) Alle synchronen Aufgaben sind auf der Hauptaufgabe Thread-Ausführung, die einen Ausführungskontextstapel bildet.
(2) Zusätzlich zum Hauptthread gibt es auch eine „Aufgabenwarteschlange“. Solange die asynchrone Aufgabe laufende Ergebnisse hat, wird ein Ereignis in die „Aufgabenwarteschlange“ gestellt.
(3) Sobald alle Synchronisierungsaufgaben im „Ausführungsstapel“ abgeschlossen sind, liest das System die „Aufgabenwarteschlange“, um zu sehen, welche Ereignisse darin enthalten sind. Diese entsprechenden asynchronen Aufgaben beenden den Wartezustand, betreten den Ausführungsstapel und beginnen mit der Ausführung.
(4) Der Hauptthread wiederholt weiterhin den dritten Schritt oben.

Solange der Hauptthread leer ist, wird die „Aufgabenwarteschlange“ gelesen. Dies ist der laufende Mechanismus von JavaScript. Dieser Vorgang wiederholt sich ständig.

„Aufgabenwarteschlange“ ist eine Ereigniswarteschlange (kann auch als Nachrichtenwarteschlange verstanden werden). Wenn das E/A-Gerät eine Aufgabe abschließt, wird ein Ereignis zur „Aufgabenwarteschlange“ hinzugefügt, um die entsprechende Asynchronität darzustellen Die Aufgabe kann in den „Ausführungsstapel“ gelangen. Der Hauptthread liest die „Aufgabenwarteschlange“, was bedeutet, dass die darin enthaltenen Ereignisse gelesen werden.
Zu den Ereignissen in der „Aufgabenwarteschlange“ gehören neben E/A-Geräteereignissen auch einige vom Benutzer generierte Ereignisse (z. B. Mausklicks, Seitenscrollen usw.), z. B. $(selectot).click(function), Dies ist ein relativ zeitaufwändiger Vorgang. Solange die Rückruffunktionen dieser Ereignisse angegeben sind, tritt beim Auftreten dieser Ereignisse in die „Aufgabenwarteschlange“ ein und wartet darauf, dass der Hauptthread liest. Die sogenannte „Rückruffunktion“ (Callback) ist der Code, der vom Hauptthread aufgehängt wird. Die zuvor erwähnte Funktion im Klickereignis $(selectot).click(function) ist eine Callback-Funktion. Asynchrone Aufgaben müssen eine Rückruffunktion angeben. Wenn der Hauptthread mit der Ausführung einer asynchronen Aufgabe beginnt, wird die entsprechende Rückruffunktion ausgeführt. Beispielsweise geben die Erfolgs-, Komplett- und Fehlerfunktionen von Ajax auch ihre eigenen Rückruffunktionen an. Diese Funktionen werden zur „Aufgabenwarteschlange“ hinzugefügt und warten auf die Ausführung.

Verwandte Empfehlungen:

js-Synchronisation und asynchron

JavaScript-Synchronisation, asynchrone und Callback-Ausführungssequenzanalyse

Tiefgehendes Verständnis der Synchronisation und asynchronen Mechanismen in der JavaScript-Programmierung

Das obige ist der detaillierte Inhalt vonSynchronisation und Asynchronität in js verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!