在javascript中循环得到意想不到的结果答案

【问题标题】：looping in javascript getting unexpected results在javascript中循环得到意想不到的结果
【发布时间】：2015-01-13 18:53:03
【问题描述】：

我正在尝试向谷歌地图添加标记，这些标记上有一个数字，但是我得到的是在整个循环中重复的相同标记，这是为什么？这是我的代码，

function codeAddress() {
var address = ['hd3 3nn', 'hd6 3qf'];
for (var i = 0; i < address.length; i++) {
    var num = i;
    geocoder.geocode( { 'address': address[i]}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var image = new google.maps.MarkerImage('/~udders/wp-content/themes/muslenh2/img/markers/marker' + num + '.png',
                  new google.maps.Size(20, 34),
                  new google.maps.Point(0, 0),
                  new google.maps.Point(10, 34));
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                icon: image,
                position: results[0].geometry.location
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

}

基本上这个 /~udders/wp-content/themes/m/img/markers/marker' + num + '.png 正在创建，/~udders/wp-content/themes/m/img/markers/marker1。 png 是最后一个循环的数字，它似乎覆盖了所有以前的图标图像。

【问题讨论】：

我真的看不出你的代码有什么问题。您可以尝试使用标记创建图像，以便 marker.icon = new google.maps.MarkerImage(..) 然后作为测试创建一个 var count = 0 并增加它而不是在循环中使用 i 。
@loangburger 问题在于，在循环的每一轮中创建的函数继续访问相同的 num 变量，其值存储在外部函数中。
干杯斯图尔特这是有道理的，因为你的回答建议如下。回顾我之前的代码，我也在一个单独的函数中进行了地理编码。

标签： javascript google-maps-api-3 google-maps-markers

【解决方案1】：

这是因为how Javascript closures work。

您可以通过创建一个返回回调函数的单独函数来解决它。

function codeAddress() {
    var address = ['hd3 3nn', 'hd6 3qf'];
    for (var i = 0; i < address.length; i++) {
        geocoder.geocode({'address': address[i]}, getGeocoderCallBack(i));
    }
}

function getGeocoderCallback(num) {
    return function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var image = new google.maps.MarkerImage('/~udders/wp-content/themes/muslenh2/img/markers/marker' + num + '.png',
            new google.maps.Size(20, 34),
            new google.maps.Point(0, 0),
            new google.maps.Point(10, 34));
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                icon: image,
                position: results[0].geometry.location
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    };
}

【讨论】：