Detaillierte Erklärung der asynchronen JS-Programmierung mit Beispielen

Die Ausführungsumgebung der Javascript-Sprache ist „Single Thread“. Der sogenannte „Single Thread“ bedeutet, dass immer nur eine Aufgabe gleichzeitig erledigt werden kann. Wenn mehrere Aufgaben vorhanden sind, müssen diese in die Warteschlange gestellt werden. Nachdem die vorherige Aufgabe abgeschlossen ist, wird die nächste Aufgabe ausgeführt und so weiter.

- Der Vorteil dieses Modus besteht darin, dass er relativ einfach zu implementieren ist und die Ausführungsumgebung relativ einfach ist. Der Nachteil besteht darin, dass nachfolgende Aufgaben in die Warteschlange gestellt werden müssen, solange eine Aufgabe lange dauert

warten. Dadurch wird die Ausführung des gesamten Programms verzögert. Eine häufige Nichtreaktion des Browsers (suspended dead) wird häufig dadurch verursacht, dass ein bestimmter Teil des Javascript-Codes über einen längeren Zeitraum ausgeführt wird (z. B. eine tote

-Schleife), was dazu führt, dass die gesamte Seite an dieser Stelle hängen bleibt und andere Aufgaben nicht ausgeführt werden können durchgeführt werden.

Um dieses Problem zu lösen, unterteilt die Javascript-Sprache den Aufgabenausführungsmodus in zwei Typen: synchron (synchron) und asynchron (asynchron).

„Synchronmodus“ ist der Modus im vorherigen Absatz. Die letzte Aufgabe wartet auf das Ende der vorherigen Aufgabe, bevor sie ausgeführt wird. Die Ausführungsreihenfolge des Programms ist konsistent und synchron mit der Reihenfolge der Aufgaben 🎜>

Der „Asynchrone Modus“ ist völlig unterschiedlich. Nachdem die vorherige Aufgabe beendet ist, führt

die Rückruffunktion und die nächste Aufgabe aus wird ausgeführt, ohne auf den Abschluss der vorherigen Aufgabe zu warten, sodass die Ausführungsreihenfolge des Programms inkonsistent und asynchron mit der Reihenfolge der Aufgaben ist.

„Asynchroner Modus“ ist sehr wichtig. Auf der Browserseite sollten lang laufende Vorgänge asynchron ausgeführt werden, um zu verhindern, dass der Browser nicht mehr reagiert. Das beste Beispiel sind Ajax-Vorgänge.

Auf der Serverseite ist der „asynchrone Modus“ sogar der einzige Modus, da die Ausführungsumgebung Single-Threaded ist. Wenn alle http-Anfragen synchron ausgeführt werden dürfen, wird die Serverleistung

Wenn der Wert stark abfällt, verliert er sehr schnell die Reaktion.

4 Methoden der „asynchronen Modus“-Programmierung:

1. Rückruffunktion: Dies ist die grundlegendste Methode der asynchronen Programmierung.

Zwei Funktionen f1 und f2. Wenn f1 eine zeitaufwändige Aufgabe ist, können Sie erwägen, f1 neu zu schreiben und f2 als Rückruffunktion von f1 zu schreiben.

Der Ausführungscode lautet wie folgt: f1(f2);

function f1(callback){

    setTimeout(function () {

        // f1的任务代码

        callback();

    }, 1000);

}

Auf diese Weise wandeln wir den synchronen Vorgang in einen asynchronen Vorgang um und f1 blockiert nicht die Ausführung des Programms. Dies entspricht der Ausführung der Hauptlogik des Programms und der Verschiebung der Ausführung zeitaufwändiger Vorgänge.

Der Vorteil der Rückruffunktion besteht darin, dass sie einfach, leicht zu verstehen und bereitzustellen ist. Der Nachteil besteht darin, dass sie dem Lesen und Warten des Codes nicht förderlich ist. Die verschiedenen Teile sind stark gekoppelt (Kopplung). , der Prozess wird sehr verwirrend sein und jede Aufgabe kann nur angegeben werden Eine Rückruffunktion.

2. Ereignisüberwachung

Eine weitere Idee ist die Verwendung des ereignisgesteuerten Modus. Die Ausführung einer Aufgabe hängt nicht von der Reihenfolge des Codes ab, sondern davon, ob ein Ereignis eintritt.

Nehmen Sie f1 und f2 als Beispiel. Binden Sie zunächst ein Ereignis an f1 (hier wird jQuery verwendet).

Die obige Codezeile bedeutet, dass f2 ausgeführt wird, wenn das erledigte Ereignis in f1 auftritt. Schreiben Sie dann f1 um:

f1.on('done', f2);

f1.trigger('done') bedeutet, dass nach Abschluss der Ausführung das Done-Ereignis sofort ausgelöst wird und somit mit der Ausführung von f2 begonnen wird.

function f1(){

    setTimeout(function () {

        // f1的任务代码
    
        f1.trigger('done');

    }, 1000);

}

Der Vorteil dieser Methode besteht darin, dass sie relativ einfach zu verstehen ist, mehrere Ereignisse binden kann, jedes Ereignis mehrere Rückruffunktionen angeben kann und „entkoppelt“ werden kann, was der Modularisierung förderlich ist. Der Nachteil besteht darin, dass das gesamte Programm ereignisgesteuert werden muss und der laufende Prozess sehr unklar wird.

3. Veröffentlichen/Abonnieren (Beobachtermodus)

Das „Ereignis“ im vorherigen Abschnitt kann als „Signal“ verstanden werden.

Wir gehen davon aus, dass es ein „Signalzentrum“ gibt. Wenn eine Aufgabe abgeschlossen ist, können andere Aufgaben das Signalzentrum „abonnieren“. kann mit der Ausführung beginnen. Dies wird als „Publish-Subscribe-Muster“ (Publish-Subscribe-Muster) oder auch als „Observer-Muster“ (Observer-Muster) bezeichnet.

Es gibt viele Implementierungen dieses Musters. Die unten verwendete ist Ben Almans Tiny Pub/Sub, ein Plug-in für jQuery.

Zuerst abonniert f2 das „Fertig“-Signal von „Signal Center“ jQuery.

Dann wird f1 wie folgt umgeschrieben:

jQuery.subscribe("done", f2);

jQuery.publish("done") bedeutet, dass f1 nach der Ausführung im „Signal Center“ von jQuery veröffentlicht wird „Fertig“-Signal, wodurch die Ausführung von f2 ausgelöst wird.

function f1(){

    setTimeout(function () {

        // f1的任务代码

        jQuery.publish("done");

    }, 1000);

}

Darüber hinaus können Sie sich auch abmelden, nachdem f2 die Ausführung abgeschlossen hat.

Die Art dieser Methode ähnelt dem „Event Listening“, ist aber offensichtlich besser als letzteres. Denn wir können den Betrieb des Programms überwachen, indem wir im „Message Center“ nachsehen, wie viele Signale vorhanden sind und wie viele Abonnenten jedes Signal hat.

jQuery.unsubscribe("done", f2);

4. Promises-Objekt

Das Promises-Objekt ist eine von der CommonJS-Arbeitsgruppe vorgeschlagene Spezifikation, um eine einheitliche Schnittstelle für die asynchrone Programmierung bereitzustellen.

Einfach ausgedrückt besteht die Idee darin, dass jede asynchrone Aufgabe ein Promise-Objekt zurückgibt, das über eine then-Methode verfügt, die die Angabe einer Rückruffunktion ermöglicht. Beispielsweise kann die Rückruffunktion f2 von f1 wie folgt geschrieben werden:

f1().then(f2);

f1().then(f2);

f1要进行如下改写（这里使用的是jQuery的实现）：

function f1(){

    var dfd = $.Deferred();

    setTimeout(function () {

        // f1的任务代码

        dfd.resolve();

    }, 500);

return dfd.promise;

}

这样写的优点在于，回调函数变成了链式写法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以实现许多强大的功能。

比如，指定多个回调函数：

f1().then(f2).then(f3);

再比如，指定发生错误时的回调函数：

f1().then(f2).fail(f3);

而且，它还有一个前面三种方法都没有的好处：如果一个任务已经完成，再添加回调函数，该回调函数会立即执行。所以，你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解，都相对比较难。

相关推荐：

JS异步编程实例详解

详谈nodejs异步编程_node.js

剖析Node.js异步编程中的回调与代码设计模式_node.js

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der asynchronen JS-Programmierung mit Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!