Sie wissen vielleicht, dass die Ausführungsumgebung der Javascript-Sprache „Single Thread“ ist.
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, solange eine Aufgabe lange dauert, nachfolgende Aufgaben in die Warteschlange gestellt werden müssen, was die Ausführung verzögert des gesamten Programms. 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 Ausführungsmodus von Aufgaben 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 Völlig anders. Jede Aufgabe verfügt über eine oder mehrere Rückruffunktionen (Callback). Die nächste Aufgabe wird nicht ausgeführt, sondern die Rückruffunktion wird ausgeführt, ohne auf das Ende der vorherigen Aufgabe zu warten Die Reihenfolge der Programmausführung ist 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 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. Rückruffunktion
Dies ist die grundlegendste Methode der asynchronen Programmierung.
Angenommen, es gibt zwei Funktionen f1 und f2, und letztere wartet auf das Ausführungsergebnis der ersteren.
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.
setTimeout(function () {
// Aufgabencode von f1
callback();
}, 1000);
}
Mit dieser Methode wandeln wir synchrone Vorgänge in asynchrone Vorgänge um. 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 Verwalten des Codes nicht förderlich ist Sehr verwirrend und jede Aufgabe kann nur eine Rückruffunktion angeben.
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).
setTimeout(function () {
// Aufgabencode von f1
f1.trigger('done');
}, 1000);
}
L'avantage de cette méthode est qu'elle est relativement facile à comprendre, qu'elle peut lier plusieurs événements, que chaque événement peut spécifier plusieurs fonctions de rappel et qu'elle peut être « découplée », ce qui est propice à la modularisation. L'inconvénient est que l'ensemble du programme doit être piloté par des événements et que le processus en cours devient très flou.
3. Publier/Abonnez-vous
L'« événement » de la section précédente peut être compris comme un « signal ».
Nous supposons qu'il existe un "centre de signal". Lorsqu'une certaine tâche est exécutée, elle "publie" un signal au centre de signal. D'autres tâches peuvent "s'abonner" au signal du centre de signal pour savoir ce que vous pouvez. commencez à l’exécuter vous-même. C'est ce qu'on appelle le « modèle de publication-abonnement » (modèle de publication-abonnement), également connu sous le nom de « modèle d'observateur » (modèle d'observateur).
Il existe de nombreuses implémentations de ce modèle. Celle utilisée ci-dessous est Tiny Pub/Sub de Ben Alman, qui est un plug-in pour jQuery.
Tout d'abord, f2 s'abonne au signal "done" du jQuery "Signal Center".
setTimeout(function () {
// Code de tâche de f1
jQuery.publish("done");
}, 1000);
}
De plus, une fois l'exécution de f2 terminée, vous pouvez également vous désinscrire.
4. Objet Promesses
L'objet Promises est une spécification proposée par le groupe de travail CommonJS pour fournir une interface unifiée pour la programmation asynchrone.
En termes simples, l'idée est que chaque tâche asynchrone renvoie un objet Promise, qui possède une méthode then qui permet de spécifier une fonction de rappel. Par exemple, la fonction de rappel f2 de f1 peut s'écrire :
var dfd = $.Deferred();
setTimeout(function () {
// Code de tâche de f1
dfd.resolve();
}, 500);
Retourner dfd.promise ;
}
Par exemple, spécifiez plusieurs fonctions de rappel :
