Maison  >  Article  >  interface Web  >  4 méthodes de programmation asynchrone en javascript

4 méthodes de programmation asynchrone en javascript

藏色散人
藏色散人original
2021-03-31 11:31:534131parcourir

Quatre méthodes de programmation asynchrone en JavaScript : 1. Fonction de rappel, qui est la méthode la plus basique de programmation asynchrone ; 2. Écoute d'événements, en utilisant le mode piloté par les événements ; 3. Publication/abonnement 4. Objet de promesses ; , La programmation asynchrone fournit une interface unifiée.

4 méthodes de programmation asynchrone en javascript

L'environnement d'exploitation de cet article : système Windows 7, javascript version 1.8.5, ordinateur DELL G3

Quatre méthodes de Programmation asynchrone JS

1. Fonction de rappel, qui est la méthode la plus basique de programmation asynchrone

Supposons qu'il existe deux fonctions f1 et f2, et la ce dernier attend le résultat de l'exécution du premier. Si f1 est une tâche fastidieuse, vous pouvez envisager de réécrire f1 et d'écrire f2 comme fonction de rappel de f1.

function f1(callback){
 
  setTimeout(function () {
 
      // f1的任务代码
 
    callback();
 
  }, 1000);
}

En utilisant cette méthode, nous transformons l'opération synchrone en une opération asynchrone. F1 ne bloquera pas l'exécution du programme, ce qui équivaut à exécuter d'abord la logique principale du programme et à retarder l'exécution des opérations fastidieuses. .

L'avantage de la fonction callback est qu'elle est simple, facile à comprendre et à déployer. L'inconvénient est qu'elle n'est pas propice à la lecture et à la maintenance du code. Les différentes parties sont fortement couplées (Couplage). , le processus sera très déroutant et chaque tâche ne peut être spécifiée qu'avec une fonction de rappel.

2. Surveillance des événements

Une autre façon de penser est d'utiliser le mode événementiel. L'exécution d'une tâche ne dépend pas de l'ordre du code, mais de la survenance d'un événement.

f1.on('done', f2); Lorsque l'événement done se produit dans f1, f2 est exécuté.

function f1(){
 
  setTimeout(function () {
 
    // f1的任务代码
    f1.trigger('done');
 
  }, 1000);
 
}

f1.trigger('done') signifie qu'une fois l'exécution terminée, l'événement done sera déclenché immédiatement pour commencer l'exécution de f2.

L'avantage de cette méthode est qu'elle est plus facile à comprendre, elle peut lier plusieurs événements, chaque événement peut spécifier plusieurs fonctions de rappel, et elle peut être "découplée" (Découplage). Propice à la réalisation de 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.

[Apprentissage recommandé : Tutoriel de base js]

3. Publier/Abonnez-vous

Nous supposons qu'il existe un " signal" Center", lorsqu'une tâche est terminée, elle "publie" un signal au centre de signal. D'autres tâches peuvent "s'abonner" au signal au centre de signal pour savoir quand elles peuvent commencer l'exécution. 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). Nous pouvons surveiller le fonctionnement du programme en consultant le « Centre de messages » pour voir combien de signaux existent et combien d'abonnés chaque signal possède.

jQuery.subscribe("done", f2); //首先,f2向"信号中心"jQuery订阅"done"信号。
function f1(){
 
  setTimeout(function () {
 
    // f1的任务代码
 
    jQuery.publish("done"); //f1执行完成后,向"信号中心"jQuery发布"done"信号,引发f2的执行。
 
  }, 1000);
 
  }
 
jQuery.unsubscribe("done", f2); //f2完成执行后,也可以取消订阅(unsubscribe)。

4. Objet Promises

L'objet Promises est une spécification proposée par le groupe de travail CommonJS à cet effet. de programmation asynchrone fournit une interface unifiée. 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.

f1().then(f2);
 
function f1(){
 
  var dfd = $.Deferred();
 
  setTimeout(function () {
 
    // f1的任务代码
 
    dfd.resolve();
 
  }, 500);
 
  return dfd.promise;
 
}

La fonction de rappel a été écrite dans un style de chaîne. Le flux du programme est clairement visible et il existe un ensemble complet de méthodes de support qui peuvent réaliser de nombreuses fonctions puissantes.

f1().then(f2).then(f3); //指定多个回调函数
f1().then(f2).fail(f3); //指定发生错误时的回调函数

Si une tâche a été terminée et qu'une fonction de rappel est ajoutée, la fonction de rappel sera exécutée immédiatement. Ainsi, vous n'avez pas à vous inquiéter si vous avez manqué un événement ou un signal. L’inconvénient de cette méthode est qu’elle est relativement difficile à rédiger et à comprendre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn