Comment puis-je éviter des résultats inattendus lors de l'utilisation de processus asynchrones dans des boucles For JavaScript ?

Processus asynchrones dans les boucles For JavaScript

En JavaScript, les boucles for peuvent s'exécuter de manière asynchrone, ce qui entraîne des résultats inattendus lorsque vous travaillez avec des rappels. Prenons l'exemple suivant :

var i;
var j = 10;
for (i = 0; i < j; i++) {
    asynchronousProcess(callbackFunction() {
        alert(i);
    });
}

Ce code vise à afficher des alertes avec des nombres de 0 à 10. Cependant, en raison de la nature asynchrone de la boucle, la fonction de rappel peut se déclencher après que plusieurs itérations de boucle se soient produites, ce qui entraîne l'affichage de valeurs plus élevées de i.

Solutions

Pour résoudre ce problème, il est crucial de capturer l'index de la boucle dans une fermeture pour chaque rappel. Ceci peut être réalisé de plusieurs manières :

• Utilisez .forEach()` : forEach() crée sa propre fermeture de fonction pour chaque itération.

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

• Créer une fermeture de fonction à l'aide d'un IIFE :

var j = 10;
for (var i = 0; i < j; i++) {
    (function(cntr) {
        // Capture the value of `i` into `cntr`
        asynchronousProcess(function() {
            console.log(cntr);
        });
    })(i);
}

• Modifier la fonction asynchrone : Transmettez la variable à la fonction asynchrone et demandez-la de la renvoyer au rappel.

var j = 10;
for (var i = 0; i < j; i++) {
    asynchronousProcess(i, function(cntr) {
        console.log(cntr);
    });
}

• Utilisez ES6 let` : Lorsqu'il est disponible, déclarez la variable de boucle en utilisant let.

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

• Sérialiser avec des promesses et async/await` : Cette approche garantit l'exécution séquentielle d'opérations asynchrones dans un environnement moderne.

async function someFunction() {
    const j = 10;
    for (let i = 0; i < j; i++) {
        // Wait for previous promise to resolve before proceeding
        await asynchronousProcess();
        console.log(i);
    }
}

• Exécuter des opérations en parallèle et collecter Résultats : Utilisez Promise.all() pour collecter les résultats dans l'ordre.

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

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

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!