Detaillierte Erläuterung von 4 Möglichkeiten zur Implementierung von asynchronem JavaScript

Sie wissen vielleicht, dass die Ausführungsumgebung der Javascript-Sprache „单线程“ (einzelner Thread) ist.

Der sogenannte „Single Thread“ bedeutet, dass jeweils nur eine Aufgabe 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 eine Aufgabe lange dauert. Nachfolgende Aufgaben müssen in die Warteschlange gestellt werden, was die Ausführung des gesamten Programms verzögert. Das häufige Nicht-Reagieren des Browsers (Suspended Death) wird oft dadurch verursacht, dass ein bestimmter Teil des Javascript-Codes über einen längeren Zeitraum ausgeführt wird (z. B. eine Endlosschleife), was dazu führt, dass die gesamte Seite an dieser Stelle hängen bleibt und andere Aufgaben nicht ausgeführt werden können.

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

„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 Modus" ist völlig anders. Jede Aufgabe verfügt über eine oder mehrere Rückruffunktionen (Rückruf). Nachdem die vorherige Aufgabe beendet ist, führt sie, anstatt die nächste Aufgabe auszuführen, die Rückruffunktion aus. Die letztere Aufgabe wartet nicht auf die vorherige Die Aufgaben werden ausgeführt, wenn sie abgeschlossen sind, daher ist die Ausführungsreihenfolge des Programms inkonsistent und asynchron mit der Reihenfolge der Aufgaben.

„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, sinkt die Serverleistung stark und es kommt zu einem baldigen Reaktionsverlust.

Dieser Artikel fasst 4 Methoden der „asynchronen Modus“-Programmierung zusammen. Wenn Sie sie verstehen, können Sie Javascript-Programme mit einer vernünftigeren Struktur, besserer Leistung und einfacherer Wartung schreiben.

1. Rückruffunktion

Dies ist die grundlegendste Methode der asynchronen Programmierung.

Angenommen, es gibt zwei Funktionen f1 und f2, und die letztere wartet auf das Ausführungsergebnis der ersteren.

　　f1();

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

　　}

Der Ausführungscode lautet wie folgt:

　　f1(f2);

Auf diese Weise verwandeln wir den synchronen Vorgang in einen asynchronen Vorgang, und f1 blockiert nicht die Ausführung des Programms entspricht: Führen Sie zuerst die Hauptlogik des Programms aus und verschieben Sie die 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 Verwalten des Codes nicht förderlich ist. Die verschiedenen Teile sind stark gekoppelt (Coupling). , der Prozess wird sehr verwirrend sein und jede Aufgabe muss nur Es kann eine Rückruffunktion angegeben werden.

2. Ereignisüberwachung

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

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

　　f1.on('done', f2);

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

　　function f1(){

　　　　setTimeout(function () {

　　　　　　// f1的任务代码

　　　　　　f1.trigger('done');

　　　　}, 1000);

　　}

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.

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 für die Implementierung von Vorteil ist Modulwechsel . Der Nachteil besteht darin, dass das gesamte Programm ereignisgesteuert werden muss und der laufende Prozess sehr unklar wird.

3. Veröffentlichen/Abonnieren

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

Wir gehen davon aus, dass es eine „Signalzentrale“ gibt. Wenn eine Aufgabe abgeschlossen ist, können andere Aufgaben das Signal von der Signalzentrale „abonnieren“. wissen, wann Sie mit der Ausführung beginnen können. Dies wird als „Publish-Subscribe-Muster“ (Publish-Subscribe-Muster) bezeichnet, auch bekannt als „Beobachtermuster“ (Beobachtermuster).

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 der „Signal Center“-jQuery.

　　jQuery.subscribe("done", f2);

Dann wird f1 wie folgt umgeschrieben:

　　function f1(){

　　　　setTimeout(function () {

　　　　　　// f1的任务代码

　　　　　　jQuery.publish("done");

　　　　}, 1000);

　　}

jQuery.publish("done")的意思是，f1执行完成后，向”信号中心”jQuery发布”done”信号，从而引发f2的执行。

此外，f2完成执行后，也可以取消订阅（unsubscribe）。

　　jQuery.unsubscribe("done", f2);

这种方法的性质与”事件监听”类似，但是明显优于后者。因为我们可以通过查看”消息中心”，了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。

四、Promises对象

Promises对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。

简单说，它的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。比如，f1的回调函数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);

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von 4 Möglichkeiten zur Implementierung von asynchronem JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!