JavaScript: Synchroniser des événements asynchrones

Un des problèmes récurrents du développement événementiel est que l’on a parfois besoin de synchroniser l’exécution d’une fonction. En effet, il est parfois important qu’une fonction finisse avant d’en appeler une autre, ou bien elle-même une nouvelle fois. Dans mon cas, je vais vous montrer comment synchroniser un événement JavaScript (en l’occurrence un keydown) pour que le trigger que vous lui avez affecté ne s’exécute pas deux fois en parallèle, grâce à une librairie à l’heure actuelle peu connue: jsAsyncQueue.

Le problème

Prenons comme exemple le code JavaScript suivant (utilisant la librairie jQuery):

Dans cet exemple, on récupère la valeur actuelle d’un input pour la traiter puis mettre à jour la valeur du champ de texte. C’est un exemple un peu bête mais qui résume bien le problème… Si j’appuie rapidement sur mes touches, on comprend bien qu’on peut avoir plusieurs exécutions de la fonction de trigger en parallèle. Ainsi, la valeur que l’on a récupéré au début de notre fonction n’est plus valable à un certain moment parce qu’une autre exécution du trigger l’as modifié en parallèle.


La solution

Ainsi, en utilisant jsAsyncQueue, on va pouvoir faire un système qui attend que le premier trigger soit fini pour lancer le suivant. Cette opération peut entraîner des lenteurs mais revient à définir une fonction comme synchronized en Java par exemple.

Voici donc le code qui résout le problème ci-dessus (n’oubliez pas d’include le fichier JavaScript de la librairie):

On créé donc une queue AsyncQueue à laquelle nous allons ajouter la fonction qui doit être lancée avec ses arguments. Ainsi, dès que le worker de la queue arrive à la fonction, il la lance. Le processing des événements keydown est donc bien synchrone maintenant !

facebooktwittergoogle_plusredditpinterestlinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">