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

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.

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).

f1.on('done', f2);

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.

jQuery.subscribe("done", f2);

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.

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!