javascript - 异步调用的变量引用问题

Question

我一直在研究 JavaScript，但有些东西我不太明白。我这里有这段代码:

$.getJSON('data.json', function(obj) {

    for( var p in obj.List )
    {               
        datas['id'] = obj.List[p].ListingId;
        datas['area'] = area;

        //console.log(datas);

        var geocoder = new google.maps.Geocoder();              
        geocoder.geocode( { 'address': datas['area'] }, function(results,status)
        {

            if(status == google.maps.GeocoderStatus.OK)
            {
                var latlng = new google.maps.LatLng(results[0].geometry.location.Ya, results[0].geometry.location.Za);

                datas['latlng'] = latlng;

                //console.log(datas);                       

            }                               
        });
     }      
});

好的，现在假设 for 循环运行 3 次。如果我们取消注释第一个“console.log(datas)”行并运行该页面，在控制台中我们会看到 3 个“datas”对象，它们具有自己的“id”和“area”。如果我在地理编码回调中注释第一个“console.log(datas)”并取消注释第二个“console.log(datas)”，则当我运行代码时，所有 3 个“datas”对象在“id”、“区域”和“latlng”。然而我预计这 3 个“数据”对象的纬度会有所不同。

有什么想法吗？

Answer 1

您传递给geocoder.geocode函数的函数何时运行？如果没有立即运行，则 for 循环将在地理编码函数运行之前运行三次。这意味着 datas['id'] 和 datas['area'] 将被设置为循环的最后一次迭代......在这种情况下，您需要捕获地理编码函数闭包内的数据数组。

在这种情况下，您需要类似的东西:

$.getJSON('data.json', function(obj) {

    for( var p in obj.List )
    {               
        datas['id'] = obj.List[p].ListingId;
        datas['area'] = area;

        //console.log(datas);

        var geocoder = new google.maps.Geocoder();              
        geocoder.geocode( { 'address': datas['area'] }, function(datas){ return function(results,status)
        {

            if(status == google.maps.GeocoderStatus.OK)
            {
                var latlng = new google.maps.LatLng(results[0].geometry.location.Ya, results[0].geometry.location.Za);

                datas['latlng'] = latlng;

                //console.log(datas);                       

            }                               
        }}(datas));
     }      
});

这可以防止匿名函数使用的 datas 变量被 for 循环更新。