ループ内で非同期呼び出しが完了したときのみ出力する

Question

GoogleプレイスAPIを使用していて、placeTableの値を取得しようとしています。最後に更新しようとすると、変数は空になります。

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>"; 
     } 

    } 
} 

アップデート：私は私のコードを調整し、応答をカウントすることができたすべての入力で 。

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は、将来、いつか呼ばれることがあります。あなたの行：

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

callbacks関数が呼び出される前に実行されています。

UPDATE：リファクタリングコード：

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); 
    } 
}