僅當循環內完成異步調用時才輸出

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