Ausgabe nur, wenn asynchrone Aufrufe innerhalb der Schleife abgeschlossen sind

Question

Ich benutze Google places API und versuche, den Wert von placeTable zu erhalten. Wenn ich versuche, am Ende zu aktualisieren, ist die Variable leer.

var placeTable; 

function callback(results, status) { 

    if (status == google.maps.places.PlacesServiceStatus.OK) { 

     for (var i = 0; i < results.length; i++) { 

      var request = { placeId: results[i].place_id }; 

      service.getDetails(request, callbacks); 

      placeTable = "<table>"; 

      function callbacks(place, status) { 
       if (status == google.maps.places.PlacesServiceStatus.OK) { 
        placeTable += "<tr><td>" + place.name + "</td><td>" + place.vicinity + "</td></tr>"; 
       } 
      } 
      container.innerHTML += placeTable + "</table>"; 
     } 

    } 
} 

Update: Mit all dem Eingang ich in der Lage war, meinen Code anzupassen und die Antworten zu zählen.

function callback(results, status) { 

    if (status == google.maps.places.PlacesServiceStatus.OK) { 

     var j = 0; 
     var placeTable = "<table>"; 

     for (var i = 0; i < results.length; i++) { 

      var request = { placeId: results[i].place_id }; 

      service.getDetails(request, callbacks); 

      function callbacks(place, status) { 
       if (status == google.maps.places.PlacesServiceStatus.OK) { 

        j++; 

        placeTable += "<tr><td>" + place.name + "</td><td>" + place.vicinity + "</td></tr>"; 

        if(results.length === j){ 

        container.innerHTML += placeTable + "</table>"; 

        } 
       } 
      } 
     } 

    } 
} 

Answer 1

callbacks kann irgendwann in Zukunft aufgerufen werden. So Ihre Linie:

container.innerHTML += placeTable + "</table>"; 

ausgeführt wird, bevor callbacks Funktion aufgerufen wird.

UPDATE: Refactoring Code:

function callback(results, status) { 
    if (status != google.maps.places.PlacesServiceStatus.OK) { 
     return; 
    } 

    var placeTable = "<table>"; 
    var detailsDone = 0; 

    function callbacks(place, status) { 
     detailsDone += 1; 

     if (status == google.maps.places.PlacesServiceStatus.OK) { 
      placeTable += "<tr><td>" + place.name + "</td><td>" + place.vicinity + "</td></tr>"; 
     } 

     if (detailsDone >= results.length) { 
      container.innerHTML += placeTable + "</table>"; 
     } 
    } 

    for (var i = 0; i < results.length; i++) { 
     service.getDetails({ 
      placeId: results[i].place_id 
     }, callbacks); 
    } 
}