javascript - 在 for 循环中使用 onload 时很奇怪

Question

这个问题已经有答案了:

Javascript infamous Loop issue? [duplicate] (5 个回答)

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 9 年前。

我正在使用 JavaScript 和 HTML Canvas 制作游戏。 “onload”在没有 for 循环的情况下完美工作。但是“onload”在 for 循环中变得有问题且不合理。不过，我想出了一个简单的解决方法来跳过这个问题。但我还是很好奇为什么。这是代码以及解决方法:

我创建了一个对象:

function Monster() {
    this.image = new Image();
    this.ready = false;
}

并创建了一些(假设是两个)实例:

var monster = [];
for(var a = 0; a < 2; a++) {
    monster.push(new Monster());
}

当我尝试初始化这些对象时，它会失败:

for(n = 0; n < monster.length; n++) { //assume length is 2
    monster[n].image.onload = function() {
        monster[n].ready = true;   /* Problem raise up here, n has the same value as monster.length. 
                                      If length is 2, this line gonna run 2 times */
    };
    monster[n].image.src = 'images/m1.png';
}

但是，这个问题可以通过创建一个函数轻松解决:

for(n = 0; n < monster.length; n++) {
    makeMonster(n);
}

还有:

var makeMonster = function(n) {
    monster[n].image.onload = function() {
        monster[n].ready = true;
    };
    monster[n].image.src = 'images/m1.png';
};

问题是，为什么？

Answer 1

onload 函数是异步的，因此当它触发时，循环已经完成，n 的值就是它最后设置的值。

您必须使用闭包将 n 变量的值锁定在新作用域中，创建新函数也会创建这样的作用域，或者像这样

for(n = 0; n < monster.length; n++) {
    (function(k) {
        monster[k].image.onload = function() {
            monster[k].ready = true;
        }
        monster[k].image.src = 'images/m1.png';
     })(n);
}