Асинхронный процесс внутри цикла javascript for [дубликат]

The for цикл выполняется немедленно до завершения, пока все ваши асинхронные операции запущены. Когда они завершат некоторое время в будущем и вызовут свои обратные вызовы, значение вашей переменной индекса цикла i будет последнее значение для всех обратных вызовов.

это так for цикл не ждет завершения асинхронной операции, прежде чем перейти к следующей итерации цикла и потому, что асинхронные обратные вызовы вызываются некоторое время в будущем. Таким образом, цикл завершает свои итерации, а затем обратные вызовы вызываются, когда эти асинхронные операции заканчиваются. Таким образом, индекс цикла "Сделано" и сидит на своем конечном значении для всех обратных вызовов.

чтобы обойти это, вы должны уникально сохранить индекс цикла отдельно для каждого обратного вызова. В JavaScript способ сделать это, чтобы захватить его в замыкание функции. Это можно либо сделать, либо создать встроенное закрытие функции специально для этой цели (первый пример показан ниже) или вы можете создать внешнюю функцию, которой вы передаете индекс, и позволить ей поддерживать индекс уникально для вас (второй пример показан ниже).

С 2016 года, если у вас есть полностью до спецификации ES6 реализации Javascript, вы также можете использовать let определение for переменная цикла и она будет однозначно определена для каждой итерации for цикл (третья реализация ниже). Но обратите внимание, что это поздняя функция реализации в ES6 реализации, поэтому вы должны убедиться, что ваша среда выполнения поддерживает этот параметр.

использовать .forEach () для итерации, так как он создает свою собственную функцию closure

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

создайте свою собственную функцию закрытия с помощью 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);
}

создайте или измените внешнюю функцию и передайте ей переменную

если вы можете изменить asynchronousProcess() функция, то вы можете просто передать значение в там и есть asynchronousProcess() функция cntr обратно в обратный вызов следующим образом:

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

используйте ES6 let

если у вас есть среда выполнения Javascript, которая полностью поддерживает ES6, вы можете использовать let в своем for цикл вроде этого:

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

let объявленные в for объявление цикла, как это создаст уникальное значение i для каждого вызова цикла (который является тем, что вы хотеть.)

сериализация с обещаниями и async / await

если ваша асинхронная функция возвращает обещание, и вы хотите сериализовать свои асинхронные операции для запуска один за другим, а не параллельно, и вы работаете в современной среде, которая поддерживает async и await, то у вас есть несколько вариантов.

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);
    }
}

это позволит убедиться, что только один вызов asynchronousProcess() находится в полете в то время и for цикл даже не будет продвигаться пока каждый из них не будет сделано. Это отличается от предыдущих схем, которые все выполняли ваши асинхронные операции параллельно, поэтому это полностью зависит от того, какой дизайн вы хотите. Примечание:await работает с обещанием, поэтому ваша функция должна возвращать обещание, которое разрешено / отклонено, когда асинхронная операция завершена. Кроме того, обратите внимание, что для того, чтобы использовать await, содержащая функция должна быть объявлена async.