Question

这是一个非常简化的代码段来说明问题。

var srcs = ["url1", "url2", "url3"];

for (var i = 0; i < srcs.length; i++) {

    var img = document.createElement("img");

    var tryBrokeClosure = i;

    img.onload = function() {
        console.log(tryBrokeClosure);
    };

    img.src = srcs[i];
}

你可能已经猜到了，我在期待：

0
1
2

但得到了：

2
2
2

所以我的问题是：如何安全地将i变量传递给异步函数而不会被原始范围更改？

编辑：

我有answer这个非常相似的question，但是这个答案使用了一个函数的创建来打破封闭，这是我无法做到的。

Answer 1

img.onload = (function(i) {
  return function() {
    console.log(i);
  }
})(i);

或

img.onload = function(i) {
  console.log(i);
}.bind(img, i);

在异步调用中解决范围关闭问题

1 个答案: