Comment éviter les problèmes de portée de variable de boucle For asynchrone de JavaScript ?

Traitement asynchrone dans une boucle for JavaScript : résoudre le problème de portée variable

Lors de l'exécution d'une boucle d'événement dans une boucle for qui utilise des processus asynchrones , il est courant de rencontrer un problème où les fonctions de rappel récupèrent des valeurs incorrectes pour la variable de boucle i. Ce comportement vient du fait que la boucle termine ses itérations avant la fin des opérations asynchrones. Par conséquent, les rappels font tous référence à la valeur finale de i.

Stratégies d'atténuation

Il existe plusieurs stratégies pour résoudre ce problème et garantir que chaque rappel reçoit la valeur correcte de i :

1. Utilisation des fermetures de fonctions

En utilisant des fermetures de fonctions, vous pouvez capturer de manière unique la valeur de i pour chaque itération. Ceci peut être réalisé grâce à des fermetures anonymes de fonctions en ligne :

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

2. Utilisation de fonctions externes

Vous pouvez créer une fonction externe qui gère la valeur unique de i pour chaque itération. Cette fonction peut être passée en argument au processus asynchrone :

const j = 10;
for (let i = 0; i < j; i++) {
  (function(cntr) {
    asynchronousProcess(cntr, (result) => {
      console.log(result); // cntr will hold the correct value of i
    });
  })(i);
}

3. Utilisation d'ES6 let

Si votre environnement prend en charge ES6, le mot-clé let peut être utilisé dans la déclaration de boucle for pour créer une valeur unique de i pour chaque itération :

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

4. Sérialisation avec Promises et async/await

Cette approche implique la sérialisation des opérations asynchrones pour qu'elles s'exécutent séquentiellement plutôt qu'en parallèle. L'utilisation d'async/wait et le renvoi des promesses du processus asynchrone garantissent qu'une seule opération est active à la fois. Cependant, cela nécessite un environnement moderne prenant en charge ces fonctionnalités :

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

5. Exécution parallèle avec Promise.all()

Si l'objectif est d'exécuter des opérations asynchrones en parallèle tout en collectant les résultats dans l'ordre de la boucle, Promise.all() peut être utilisé :

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

someFunction().then((results) => {
  console.log(results); // array of results in order
});

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!