Einführung in 4 Methoden der asynchronen Programmierung in Javascript

Sie wissen vielleicht, dass die Ausführungsumgebung der Javascript-Sprache „Single 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 nachfolgende Aufgaben in die Warteschlange gestellt werden müssen, solange eine Aufgabe lange dauert die Ausführung des gesamten Programms verzögern. Die 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 Endlosschleife), wodurch 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 (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 Modus" ist völlig anders. Jede Aufgabe verfügt über eine oder mehrere Rückruffunktionen. Nachdem die vorherige Aufgabe beendet ist, wird die nächste Aufgabe nicht ausgeführt, sondern die Rückruffunktion. Die letztere Aufgabe wird ausgeführt, ohne auf das Ende der vorherigen Aufgabe zu warten Die Ausführungsreihenfolge des Programms stimmt nicht mit der Reihenfolge der Aufgaben überein und ist asynchron.

„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 Antwortverlust.

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. Callback-Funktion

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 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 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 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, um mit der Ausführung von f2 zu beginnen.
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

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“ oder auch „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 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") bedeutet, dass nach der Ausführung von f1 eine Nachricht an " signal center“ jQuery gibt das „Done“-Signal frei und löst dadurch die Ausführung von f2 aus.

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

　jQuery.unsubscribe("done", f2);

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.

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要进行如下改写（这里使用的是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);

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

你可能知道，Javascript语言的执行环境是”单线程”（single thread）。

所谓”单线程”，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。

这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。

为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

“同步模式”就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；”异步模式”则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

“异步模式”非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，”异步模式”甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。

Das obige ist der detaillierte Inhalt vonEinführung in 4 Methoden der asynchronen Programmierung in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!