javascript - 在子函数中访问循环迭代？

Question

我正在使用 Google Maps API 在 map 上绘制多个点。然而，在下面的点击事件函数中，i 始终设置为 4，即迭代循环后的值:

// note these are actual addresses in the real page
var addresses = new Array( "addr 1", "addr 2", "addr 3", "addr 4" );

for (var i = 0; i < addresses.length; i++) {
    geocoder.getLatLng(addresses[i], function(point) {
        if (point) {
            var marker = new GMarker(point);
            map.addOverlay(marker);
            map.setCenter(point, 13);

            GEvent.addListener(marker, "click", function() {
                // here, i=4
                marker.openInfoWindowHtml("Address: <b>" + addresses[i] + "</b>");
            });
        }
    });
}

因此，当标记显示时，它使用的是未定义的 addresses[4]。如何将 i 的正确值传递给函数？

Answer 1

您需要在当前迭代期间生成一个匿名函数，下面应该修复它:

// note these are actual addresses in the real page 
var addresses = new Array( "addr 1", "addr 2", "addr 3", "addr 4" ); 

for (var i = 0; i < addresses.length; i++) { 
    geocoder.getLatLng(addresses[i], function (current) { 
        return function(point) { 
            if (point) { 
                var marker = new GMarker(point); 
                map.addOverlay(marker); 
                map.setCenter(point, 13); 

                GEvent.addListener(marker, "click", function() { 
                    // here, i=4 
                    marker.openInfoWindowHtml("Address: <b>" + addresses[current] + "</b>"); 
                }); 
            }
        } 
    }(i)); 
} 

B//注意这些是真实页面中的实际地址var addresses = new Array( "addr 1", "addr 2", "addr 3", "addr 4");

for (var i = 0; i < addresses.length; i++) { geocoder.getLatLng(地址[i]，函数(点){ 如果(点){ var marker = new GMarker(点); map.addOverlay(标记)； map.setCenter(point, 13);

        GEvent.addListener(marker, "click", function() { 
            // here, i=4 
            marker.openInfoWindowHtml("Address: <b>" + addresses[i] + "</b>"); 
        }); 
    } 
}); 

}

进一步说明
Google 提供的 getLatLng 方法使用 ajax 调用来获取特定地址的纬度和经度。由于这是一个异步调用并且不是当前线程的一部分，因此需要一个在 ajax 请求完成时调用的回调函数。这是您指定为函数第二个参数的匿名函数。
现在，在发出 ajax 请求的同时，您的代码继续运行，每次循环遍历数组时都会增加 i 的值。当您的第一个 ajax 调用返回时，循环已经增加到地址数组的长度 (4)，因此当您的回调函数运行时，您将在之后检索范围内变量 i它已被循环增加。

使用我编写的修复程序，您正在创建一个匿名函数，它接受一个参数 - current - 并返回以前的匿名函数，其中 i 变量替换为current 变量。在循环的下一次迭代之前立即调用此函数，并将 i 变量作为第一个参数。这将创建一个闭包，在调用函数时，i 的当前值存储在 current 变量中。当我们稍后引用 current 变量时，我们将获取 i 的存储值。

这类东西我其实不太会解释，可能是我对它的理解还不如js大神。最好阅读 some more info on javascript closures .