使用 Javascript 闭包将附加数据传递给 API 回调函数

Question

我已经让它工作了一点，但似乎无法弄清楚让 for 循环传递正确值的确切措辞是什么。

for(i=0; i < the_stores.length; i++) {
    uid = the_stores[i].id;

    // get the lat long and write info to the console
    geocoder.getLatLng(the_stores[i].address, function(point) { return callbackFunc(point, uid); });
}

function callbackFunc(point, myID) {
    if(point !== null) {
        console.log(point.toString());
        console.log(myID);
    } else {
        return false;
    }
}

我正在使用 Google Maps API v2。我希望 for 循环在循环的每次迭代中将不同的 uid 值传递给回调函数，但现在它每次都传递相同的值。有人知道如何在这里获得所需的效果吗？我觉得我很接近。谢谢！

Answer 1

您正在寻找的是“立即调用函数表达式”。由于 JavaScript 只有函数作用域，没有块作用域，所有对 uid 的引用都绑定到同一个变量。

（更多信息请见：http://benalman.com/news/2010/11/immediately-invoked-function-expression/）

这是一个简单的方法：

for(i=0; i < the_stores.length; i++) {
  (function() {
    var uid = the_stores[i].id;

    // get the lat long and write info to the console
    geocoder.getLatLng(the_stores[i].address, function(point) { return callbackFunc(point, uid); });
  })();
}

Answer 2

使用您的callbackFunc 返回一个引用需要保留的值的处理程序。

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

    // get the lat long and write info to the console
    geocoder.getLatLng(the_stores[i].address, callbackFunc(the_stores[i].id));
}

function callbackFunc(myID) {
    return function(point) {
        if(point !== null) {
            console.log(point.toString());
            console.log(myID);
        } else {
            return false;
        }
    };
}

Answer 3

这就是我如此喜欢Array.forEach() 的原因。它会为您处理所有这些常见的循环问题。像这样使用它：

the_stores.forEach(function (store, i) {
    geocoder.getLatLng(store.address, function(point) {
        return callbackFunc(point, store.id);
    });
}

Array.forEach() 是现代浏览器中的原生 JavaScript，但对于 IE8 和 IE7，您需要自己添加。我推荐使用implementation provided by MDN。在我看来，至少包含所有新的 Array 方法的 JS5 shim 应该是任何网站的样板。