参见英文答案 > JavaScript closure inside loops – simple practical example                                    43个
我正在运行以下形式的事件循环：

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

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

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

解决方法:

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

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

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

截至2016年,如果你有一个完全符合规范的J6 ES6实现,你也可以使用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);
    });
}

使用ES6 let

如果您有一个完全支持ES6的Javascript执行环境,您可以在for循环中使用let,如下所示：

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

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

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

如果您的异步函数返回一个promise,并且您希望将异步操作序列化为一个接一个而不是并行运行,并且您在支持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适用于promise,因此您的函数必须返回异步操作完成时解析/拒绝的promise.另请注意,为了使用await,必须将包含函数声明为async.