jQuery异步ajax查询和返回值问题（作用域、闭包）

Question

由于异步查询和变量范围问题，代码无法正常工作。我不明白如何解决这个问题。使用 async:false 更改为 $.ajax 方法 - 不是一个选项。我知道闭包，但我如何在这里实现它 - 不知道。我在这里看到了有关 js 闭包和 jQuery 异步问题的所有主题 - 但仍然一无所获。请帮忙。 这是代码：

var map = null;
var marker;
var cluster = null;

function refreshMap() 
{
    var markers = [];  
    var markerImage = new google.maps.MarkerImage('/images/image-1_32_t.png', new google.maps.Size(32, 32));

    $.get('/get_users.php',{},function(data){
        if(data.status == 'error')
            return false;

        var users = data.users; // here users.length = 1 - this is ok;  
        for(var i in users)
        {
            //here I have every values from users - ok
            var latLng = new google.maps.LatLng(users[i].lat, users[i].lng);
            var mark = new google.maps.Marker({
                position: latLng,
                icon: markerImage
         });

             markers.push(mark);
             alert(markers.length); // length 1
        }

    },'json');

    alert(markers.length); // length 0  
    //if I have alert() above - I get result

    cluster = new MarkerClusterer(map, markers, 
    {
        maxZoom: null,
        gridSize: null
    });
}

谢谢。

Answer 1

只需移动此代码：

cluster = new MarkerClusterer(map, markers, 
{
    maxZoom: null,
    gridSize: null
});

进入回调函数（第一个警报所在的位置）

问题是，对于异步请求，即使请求尚未完成，代码也会继续执行。因此，在执行匿名回调函数之前，您的 markers 变量不会正确设置。

Answer 2

所有处理标记的代码都必须位于回调函数中。这行代码：

alert(markers.length); // length 0  

在 Ajax 调用返回之前（即执行回调之前）执行。

---

这意味着您的代码应该看起来更像这样：

$.get('/get_users.php',{},function(data){
    if(data.status == 'error')
        return false;

    var users = data.users; // here users.length = 1 - this is ok;  
    for(var i in users)
    {
        //here I have every values from users - ok
        var latLng = new google.maps.LatLng(users[i].lat, users[i].lng);
        var mark = new google.maps.Marker({
            position: latLng,
            icon: markerImage
         });

         markers.push(mark);
         alert(markers.length); // length 1

         cluster = new MarkerClusterer(map, markers, 
                   {
                           maxZoom: null,
                           gridSize: null
                   });

         // more with cluster here
     }
},'json');

如果您在 Ajax 回调中设置或更改变量，请不要在回调之外依赖它们的值。