jQuery async ajax query and returning value problem (scope, closure)

Question

Code not working because of async query and variable scope problem. I can\'t understand how to solve this. Change to $.ajax method with async:false - not an option. I know about

Answer 1

All your code that has to deal with markers has to be in your callback function. This line of code:

alert(markers.length); // length 0  

is executed before the Ajax call returns (i.e. before the callback is executed).

---

That means your code should look more like this:

$.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');

If you set or change variables in an Ajax callback, don't rely on their values outside of the callback.