如何在循环回调中引用`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);            
} 

的问题是下到相同i变量被回调函数使用;正如你所发现的那样，在回调执行的时候已经移动了。上述两个解决方案为每次迭代创建另一个变量，正是这个回调操作。

Answer 2

请参阅JavaScript closure inside loops了解您的代码无法工作的原因。

for (var i = 0; i < result.length; i++) { 
    var callback = (function(i) { 
     return function(results, status) { 
      alert(result.title[i]); 
     }; 
    })(i); 

    myObject.geocode({ param1: "param" }, callback); 
}