The 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);
});
}
Use ES6 let
如果你有完全支持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
and 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。另请注意,为了使用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);
});