Comment exécuter correctement des processus asynchrones dans les boucles For JavaScript ?

Exécution séquentielle de processus asynchrones dans des boucles For JavaScript

Lors de la création de processus asynchrones dans une boucle JavaScript for, il est crucial de résoudre le problème de maintenir les valeurs des variables de boucle. Par défaut, la boucle se termine avant la fin des processus asynchrones, ce qui entraîne des valeurs de variable incorrectes dans les fonctions de rappel.

Approches de solutions :

1. Utilisation des fermetures de fonctions :

   En créant une fermeture de fonction en ligne ou externe pour chaque itération du boucle, la variable d'index de boucle est capturée de manière unique dans la fermeture. Cela garantit que chaque rappel a accès à sa propre valeur d'index.

   Exemple 1 (fermeture en ligne) :

   someArray.forEach(function(item, i) {
       asynchronousProcess(function() {
           console.log(i);
       });
   });

   Copier après la connexion

   Exemple 2 (fermeture externe) :

   (function(i) {
       asynchronousProcess(function() {
           console.log(i);
       });
   })(i);
   ````

   Copier après la connexion

2. Exploiter ES6 Let :

   Si un environnement JavaScript compatible ES6 est disponible, le mot-clé let peut être utilisé dans les initialisations de boucles for. let crée une variable unique pour chaque itération de boucle, résolvant le problème de portée.

   for (let i = 0; i < 10; i++) {
       asynchronousProcess(function() {
           console.log(i);
       });
   }

   Copier après la connexion

3. Sérialisation avec des promesses :

   Si les processus asynchrones reviennent promesses, ils peuvent être sérialisés pour être exécutés un par un en utilisant async et wait. Cela garantit une exécution séquentielle et empêche la boucle d'avancer jusqu'à ce que chaque opération asynchrone soit terminée.

   async function someFunction() {
       for (let i = 0; i < 10; i++) {
           await asynchronousProcess();
           console.log(i);
       }
   }

   Copier après la connexion

4. Parallélisation avec Promise.all() :

   Pour exécuter des processus asynchrones en parallèle et collecter les résultats dans l'ordre, Promise.all() peut être utilisé. Il renvoie un tableau de résultats une fois que toutes les promesses sont résolues.

   function someFunction() {
       let promises = [];
       for (let i = 0; i < 10; i++) {
           promises.push(asynchonousProcessThatReturnsPromise());
       }
       return Promise.all(promises);

   Copier après la connexion

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!