for 循环和词法环境中的闭包

Question

简单的情况：我想加载几个具有共同名称和后缀的图像，例如：image0.png、image1.png、image2.png ... imageN.png

我正在使用一个简单的 for 循环：

var images = [];
for (var i=1; i<N; i++) {
    images[i] = new Image();
    images[i].onload = function () {
        console.log("Image " + i + " loaded");
    };
    images[i].src = "image" + i + ".png";
}

我在做什么进入控制台是：

Image N loaded
Image N loaded
Image N loaded
...
Image N loaded

但我想要的应该是这样的：

Image 0 loaded
Image 1 loaded
Image 2 loaded
...
Image N loaded

为什么会发生这种情况？ 我怎样才能得到我想要的行为？

Answer 1

函数内的 i 在函数执行时计算，而不是在将其分配给 onload 时计算。当任何 onload 函数触发时，您的 for 循环已经完成，因此所有函数都会看到最终值 N。

要捕获 i 的当前值，您需要将其作为参数传递给另一个函数，在该函数中可以将其捕获为局部变量：

function captureI(i) {
    return function () {
        console.log("Image " + i + " loaded");
    };
}

var images = [];
for (var i=1; i<N; i++) {
    images[i] = new Image();
    images[i].onload = captureI(i);
    images[i].src = "image" + i + ".png";
}

这有效，因为每次调用 captureI >，为该 captureI 实例创建一个新的局部变量。本质上，您正在创建 N 个不同的变量，并且每个 onload 函数捕获该变量的不同实例。

Answer 2

您可以将其包装在闭包中，以避免使用 i 变量（这是一个循环变量）并因此发生变化：

(function(j) {
  images[i].onload = function () {
      console.log("Image " + i + ", " + j + " loaded");
  };
})(i);

这演示了 i（这是一个循环变量）和更改，以及 j，这是一个函数绑定参数，不会更改。

请参阅此处的 jsfiddle：

• http://jsfiddle.net/VuLTa/

Answer 3

您的循环计数器变量已被覆盖。查看此常见问题解答条目，其中准确解释了发生这种情况的原因以及如何解决该问题。

Answer 4

由于变量i是在循环范围之外声明的，因此它在循环完成后保留其最终值。然后，您创建的匿名函数都会绑定到该变量，并且当调用它们时，它们都会获得相同的最终值 N。

这个问题。