小编典典

javascript for循环中的异步过程

all

我正在运行以下形式的事件循环:

var i;
var j = 10;
for (i = 0; i < j; i++) {

    asynchronousProcess(callbackFunction() {
        alert(i);
    });
}

我试图显示一系列显示数字 0 到 10 的警报。问题是,当回调函数被触发时,循环已经经历了几次迭代,它显示了更高的i. 有关如何解决此问题的任何建议?


阅读 59

收藏
2022-08-07

共1个答案

小编典典

for启动所有异步操作时,循环会立即运行完成。当他们在未来某个时间完成并调用他们的回调时,循环索引变量的值i将是所有回调的最后一个值。

这是因为for循环在继续循环的下一次迭代之前不会等待异步操作完成,并且因为异步回调在将来的某个时间被调用。因此,循环完成了它的迭代,然后当这些异步操作完成时调用回调。因此,循环索引已“完成”并处于所有回调的最终值。

要解决此问题,您必须为每个回调单独保存循环索引。在 Javascript
中,这样做的方法是在函数闭包中捕获它。这可以通过专门为此目的创建一个内联函数闭包来完成(下面显示的第一个示例),或者您可以创建一个将索引传递给的外部函数并让它为您唯一地维护索引(下面显示的第二个示例)。

截至 2016 年,如果您拥有完全符合 ES6 规范的 Javascript
实现,您还可以使用let来定义for循环变量,它将为循环的每次迭代唯一定义for(下面的第三个实现)。但是,请注意这是 ES6
实现中的后期实现功能,因此您必须确保您的执行环境支持该选项。

使用 .forEach() 进行迭代,因为它创建了自己的函数闭包

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

使用 ES6let

如果你有一个完全支持 ES6 的 Javascript 执行环境,你可以像这样let在你的for循环中使用:

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

let在这样的for循环声明中声明将为循环的每次调用创建一个唯一值i(这是您想要的)。

使用 Promise 和 async/await 进行序列化

如果您的 async 函数返回一个
Promise,并且您希望序列化您的异步操作以一个接一个地运行而不是并行运行,并且您在支持asyncand的现代环境中运行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使用
Promise,因此您的函数必须返回一个 Promise,该 Promise
在异步操作完成时被解析/拒绝。另外,请注意,为了使用await,必须声明包含函数async

并行运行异步操作并用于Promise.all()按顺序收集结果

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

 someFunction().then(results => {
     // array of results in order here
     console.log(results);
 }).catch(err => {
     console.log(err);
 });
2022-08-07