Tableau de Javascript montrant 0 longueur quand peuplé

Question

Je suis sûr que c'est vraiment simple mais je n'ai pas eu beaucoup de chance pour comprendre ce qui ne va pas. Je crée un tableau vide (emplacements), en le remplissant avec des objets d'emplacement dans la fonction getPartnerLocations, puis en essayant de tracer les emplacements sur la carte avec la fonction drop. Le problème que j'ai est qu'à l'intérieur de la fonction drop le tableau d'emplacements qui contient des choses retourne une longueur de zéro, donc la boucle dans le ne fonctionne pas. Tous les conseils ou idées sur ce qui se passe ici seraient grandement appréciés.

var markers = []; 
var locations = []; 
var iterator = 0; 
var map; 
var geocoder; 
var newYork = new google.maps.LatLng(40.7143528, -74.0059731); 


    function initialize() { 
    var mapOptions = { 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: newYork 
    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions); 

    } 

    function getPartnerLocations() { 
     geocoder = new google.maps.Geocoder();  
     $('.partner').each(function(index){ 

      var street = $('.partner-streetaddress',this).text(); 
      var city = $('.partner-city',this).text(); 
      var state = $('.partner-state',this).text(); 
      var country = $('.partner-country',this).text(); 

      var address = street + ', ' + city + ', ' + state + ', ' + country; 

      geocoder.geocode({ 'address': address}, function(results, status) 
      { 

       if (status == google.maps.GeocoderStatus.OK) 
       { 
        locations.push(results[0].geometry.location); 
        console.log(locations[index]); 
       } 
       else 
       { 
        console.log('failed to geocode address: ' + address); 
       } 
      }); 

     }); 
     initialize(); 
     drop(); 
    } 

    function addMarker() { 
    console.log('add marker function'); 
    markers.push(new google.maps.Marker({ 
     position: locations[iterator], 
     map: map, 
     draggable: false, 
     animation: google.maps.Animation.DROP 
    })); 
    iterator++; 
    } 

    function drop() 
    { 
    console.log(locations.length); 
    for (var i = 0; i < locations.length; i++) { 
     setTimeout(function() { 
     addMarker(); 
     }, i * 200); 
    } 
    } 

getPartnerLocations(); 

Answer 1

geocode est une fonction asynchrone.

Le rappel ne s'exécute pas avant un certain temps après vous appelez drop.
Par conséquent, lorsque vous appelez drop, le tableau est toujours vide. Vous devez appeler initialize et drop après le dernier appel AJAX, dans le rappel geocode.