javascript - 如何在循环中的回调中引用正确的值 `i`？

Question

我有这段代码:

for (var i = 0; i < result.length; i++) {
    // call a function that open a new "thread"
    myObject.geocode({ param1: "param" }, function(results, status) {
        alert(result.title[i]);
    });                                             
}

.geocode 函数(不是我的，所以我无法编辑)打开一个新的执行“线程”。

当我尝试在每个步骤上打印标题时，我总是得到 i 的最后可能值。

如何为每次迭代保留对 i 正确值的引用？

Answer 1

您可以在循环内创建一个闭包；

for (var i = 0; i < result.length; i++) {
    // call a function that open a new "thread"
    (function (i) {
        myObject.geocode({ param1: "param" }, function(results, status) {
            alert(result.title[i]);
        });
    }(i));                                             
}

所以我们在这里创建一个函数；

(function (i) {
    myObject.geocode({ param1: "param" }, function(results, status) {
        alert(result.title[i]);
    });
});

...接受一个名为i 的参数，并启动地理编码请求。通过将 (i) 添加到函数表达式声明的末尾，我们可以立即运行该函数并将 i 的当前值传递给它。

(function (i) {
    myObject.geocode({ param1: "param" }, function(results, status) {
        alert(result.title[i]);
    });
}(i));

变量 i 已经存在于比闭包更高的作用域并不重要，因为 i 的局部声明覆盖了它。我们传递给闭包的变量，或者闭包调用变量的名称可能不同；

(function (anotherVariable) {
    myObject.geocode({ param1: "param" }, function(results, status) {
        alert(result.title[anotherVariable]);
    });
}(aVariable));

或者您还可以将逻辑提取到另一个函数(我更喜欢它，但它没那么酷):

function geocode(i) {
   myObject.geocode({ param1: "param" }, function(results, status) {
       alert(result.title[i]);
   });
}

for (var i = 0; i < result.length; i++) {
    geocode(i);                                            
}

问题在于回调函数使用了same i 变量；正如您所发现的那样，在执行回调时它已经继续前进。上述两种解决方案都为每次迭代创建了另一个变量，回调操作的正是这个变量。