Processus asynchrone à l'intérieur d'un javascript pour boucle [dupliquer]

la boucle for s'exécute immédiatement jusqu'à son achèvement pendant que toutes vos opérations asynchrones commencent. Quand ils termineront quelque temps dans le futur et appelleront leurs callbacks, la valeur de votre variable d'index de boucle i sera à sa dernière valeur pour toutes les callbacks.

C'est parce que le for boucle ne pas attendre d'une opération asynchrone avant de passer à l'itération suivante de la boucle et parce que l'asynchrone les rappels sont appelés dans l'avenir. Ainsi, la boucle termine ses itérations et les callbacks sont appelés lorsque les opérations async sont terminées. En tant que tel, l'indice de boucle est "fait", et assis à sa valeur finale pour tous les rappels.

pour contourner cela, vous devez enregistrer l'index de boucle séparément pour chaque callback. En Javascript, la façon de le faire est de les saisir dans une fonction de fermeture. Cela peut être fait soit créer une fonction en ligne fermeture spécifiquement pour cet usage (le premier exemple ci-dessous) ou vous pouvez créer une fonction externe que vous passez l'index et le laisser maintenir l'index unique pour vous (deuxième exemple ci-dessous).

à partir de 2016, si vous avez une implémentation entièrement up-to-species6 de Javascript, vous pouvez également utiliser let pour définir la variable de boucle for et elle sera définie de manière unique pour chaque itération de la boucle for (troisième implémentation ci-dessous). Mais, notez qu'il s'agit d'une fonctionnalité de mise en œuvre tardive dans les implémentations ES6, vous devez donc vous assurer que votre environnement d'exécution supporte cette option.

utiliser .forEach () pour itérer car il crée sa propre fonction de fermeture

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

créez votre propre fonction de fermeture en utilisant un IIFE

var j = 10;
for (var i = 0; i < j; i++) {
    (function(cntr) {
        // here the value of i was passed into as the argument cntr
        // and will be captured in this function closure so each
        // iteration of the loop can have it's own value
        asynchronousProcess(function() {
            console.log(cntr);
        });
    })(i);
}

créer ou modifier une fonction externe et la transmettre Variable

si vous pouvez modifier la fonction asynchronousProcess() , alors vous pouvez juste passer la valeur là - dedans et avoir la fonction asynchronousProcess() le cntr de nouveau au rappel comme ceci:

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

utiliser ES6 let

si vous avez un environnement D'exécution Javascript qui supporte entièrement ES6, vous pouvez utiliser let dans votre boucle for comme ceci:

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

let déclaré dans une déclaration de boucle for comme ceci créera une valeur unique de i pour chaque invocation de la boucle (ce qui est ce que vous voulez).

Serializing with promises and async / wait

si votre fonction async retourne une promesse, et que vous voulez sérialiser vos opérations async pour exécuter les unes après les autres au lieu d'en parallèle et que vous exécutez dans un environnement moderne environnement qui supporte async et await , alors vous avez plus d'options.

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

cela permettra de s'assurer qu'un seul appel à asynchronousProcess() est en vol à la fois et que la boucle for n'avancera même pas jusqu'à ce que chacun soit terminé. C'est différent des schémas précédents qui ont tous exécuté vos opérations asynchrones en parallèle, donc cela dépend entièrement du design que vous voulez. Remarque: await fonctionne avec une promesse de sorte que votre fonction a retourner une promesse qui est résolue/rejetée lorsque l'opération asynchrone est terminée. En outre, notez que pour utiliser await , la fonction contenant doit être déclarée async .