javascript - 需要很长时间才能完成的事件是否会更改 "Mutable variable"的值

Question

我有一个大型 for 循环(大约 1000 次迭代)，其中加载来自对象的图像 URL，如果加载正确，则将该对象添加到数组中。我的问题是，由于Javascript的异步特性，如果图像加载需要很长时间，for循环是否会继续迭代，从而更改索引值，从而将错误的项目加载到大批。我从编辑器中收到一条警告，指出以下代码中的可变变量可通过闭包访问:

function createArray(data){
    var entries = data['entries'];
    for (var k = 0, j = entries.length; k < j; k++) {
            if (entries[k].type = 'image') {
                var img = new Image();
                img.onload = function(){
                    validArray.push(entries[k]); //Here is where it is added to array. This [k] is the mutable value - wondering if the image takes a long time to load, if [k] will be incremented 
                };
                img.onerror = function(){
                    console.log('error: bad image source');
                };
                img.src = entries[k].url;
            } else {
                console.log('Not an image');
            }
        }
    }

Answer 1

答案是肯定的，在执行回调时变量k可能已经改变。不过有一个简单的解决方案——将函数包装在闭包中。这样您就可以创建 k 的本地副本，或者更有意义的是，创建条目[k]的本地副本:

img.onload = (function(entry) {
    return function(){
        validArray.push(entry); 
    };
})(entries[k]);

或者，如果您希望简化语法，您可以编写一个辅助函数，例如“getAddFunction”:

var getAddFunction = function(entry) {
    return function() {
        validArray.push(entry); 
    };
};

然后就是:

img.onload = getAddFunction(entries[k])