Maison  >  Article  >  interface Web  >  Quelles sont les méthodes de programmation asynchrone en javascript

Quelles sont les méthodes de programmation asynchrone en javascript

清浅
清浅original
2019-04-19 13:07:412975parcourir

Les méthodes JavaScript pour implémenter la programmation asynchrone incluent : des méthodes de rappel faciles à comprendre et à mettre en œuvre mais difficiles à maintenir, des méthodes de publication/abonnement, des méthodes d'écoute d'événements faciles à comprendre et pouvant lier plusieurs événements mais dont le flux de travail est déroutant, et Méthodes de promesses

Le mode asynchrone est très important, les opérations de longue durée côté navigateur doivent être exécutées de manière asynchrone pour éviter de ne pas répondre. Ensuite, je présenterai en détail l'implémentation de méthodes de programmation asynchrone en JavaScript dans l'article, qui a un certain effet de référence et j'espère que cela sera utile à tout le monde.

Quelles sont les méthodes de programmation asynchrone en javascript

[Cours recommandés : Tutoriel JavaScript]

Tout le monde sait que l'environnement d'exécution de JavaScript est monothread, ce qui signifie qu'une seule tâche peut être exécutée à la fois. Si vous rencontrez plusieurs tâches, vous devez attendre dans la file d'attente la fin de la tâche précédente. Par conséquent, cela prend beaucoup de temps. Le mode synchrone est similaire à ce mode monothread. Le mode asynchrone est complètement différent. Lorsqu'une tâche est terminée, elle exécutera la fonction de rappel, et les suivantes. les tâches peuvent être La tâche précédente s'exécute simultanément. L'ordre d'exécution des tâches est différent de la séquence des tâches dans la file d'attente.

Méthode 1 : Méthode de rappel

Cette méthode est la méthode de base de la programmation asynchrone Supposons qu'il y ait deux fonctions f1 et f2, cette dernière attendra la première fonction. résultat.

F1(); 
F2();

Si f1 est une opération de longue durée, vous pouvez remplacer f1 et utiliser f2 comme fonction de rappel de f1.

function f1(callback){
setTimeout(function () {
 callback();
    }, 1000);
}

En utilisant ce mode, les opérations synchrones peuvent être converties en opérations asynchrones. f1 ne bloquera pas l'exécution du programme, il exécutera d'abord la logique principale puis effectuera des opérations fastidieuses

rappel. L'avantage des fonctions est qu'elles sont faciles à comprendre et à mettre en œuvre. Les inconvénients sont que le code est illisible et maintenable, les différents composants sont fortement couplés, le flux de travail est très déroutant et chaque tâche ne peut avoir qu'une seule fonction de rappel.

Méthode 2 : Publier/Abonnez-vous

Cet événement peut être compris comme un signal En supposant qu'il existe un centre de signal, si une tâche est terminée, il publiera un. signal au centre de signalisation, et d'autres tâches peuvent recevoir des signaux spécifiés des centres de signalisation abonnés. Cette approche est appelée modèle de publication/abonnement ou modèle d'observateur.

Exemple : f2 s'abonne au centre de signal pour le signal de fin

jQuery.subscribe(“done”,f2);

puis écrit f1 comme

function f1(){
    setTimeout(function () {
     jQuery.publish("done");
    }, 1000);
}

jQuery.publish(“done”) pour indiquer qu'il enverra le signal à f1 une fois l'exécution terminée. Center envoie un signal d'achèvement, puis f2 commencera l'exécution.

Lorsque f2 termine son exécution, il peut se désinscrire.

jQuery.unsubscribe(“done”,f2);

Troisième méthode : écoute d'événements

Une autre méthode est le modèle basé sur les événements. L'exécution d'une tâche ne dépend pas de la séquence de code. pour qu'un événement se produise. Toujours en utilisant f1 et f2 dans cet exemple, liez d'abord un événement à f1.

f1.on('done',f2);

La signification du code ci-dessus est que si l'événement d'achèvement f1 se produit, f2 sera exécuté.

function f1(){
    setTimeout(function () {
      f1.trigger('done');
    }, 1000);
}

f1.trigger('done') signifie qu'il déclenchera l'événement done, puis exécutera f2 une fois l'exécution terminée.

L'avantage est qu'il est facile à comprendre et peut lier plusieurs événements, chaque événement peut avoir de nombreuses fonctions de rappel, et il peut se découpler, ce qui est bon pour la modularité. L'inconvénient est que l'ensemble du programme sera piloté par des événements et que le flux de travail n'est pas très clair.

Méthode 4 : Méthode Promises

L'objet Promises est un standard proposé par CommonJS pour fournir une interface commune pour la programmation asynchrone. Chaque tâche asynchrone renvoie un objet Promises, qui possède une méthode then qui permet de définir une fonction de rappel. Par exemple, la fonction de rappel f2 de f1 :

F1().then(F2)

f1 doit s'écrire comme :

function f1(){
    var dfd = $.Deferred();
    setTimeout(function () {
        dfd.resolve();
    }, 500);
    return dfd.promise;
}

L'avantage est que les fonctions de rappel sont liées et le flux de travail du programme est très clair et dispose d'un ensemble complet de méthodes de liaison qui peuvent être utilisées pour implémenter des fonctionnalités puissantes.

Par exemple, définissez plusieurs fonctions de rappel :

f1().then(f2).then(f3);

Il existe également un exemple, s'il y a une erreur :

f1().then(f2).fail(f3);

Un avantage que les trois autres les méthodes n'ont pas Une fois qu'une tâche est terminée, si vous ajoutez plus de fonctions de rappel, elles seront exécutées immédiatement. L’inconvénient est que ce n’est pas facile à comprendre.

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à tout le monde.

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