Javascript：承诺不起作用。 。于是决心完成

Question

首次与承诺工作之前执行。我正在使用谷歌地图API来放置标记之间的setTimeout延迟标记，然后聚集标记。我有两个承诺。一个从一个位置解决个别标记的对象，然后另一个承诺返回标记的对象的阵列，用于群集目的。在控制台中我看到的console.log('markers before clustering');转储我看到console.log('iteration: [' + timeout + '] value: [' + value +']');还告诉我.then之前resolve回报的东西在执行之前。

在我的代码中，markers是一个空白变量，而locations是一个预先定义的纬度/经度对象。

这里是控制台输出：
标记之前聚类
maps.js：52 [未定义，未定义未定义，未定义]
maps.js：回调
maps.js后77个标记：78 [未定义，undefined，undefined，undefined]
maps.js：69次迭代：[0]值：[[object Object]]
maps.js：69次迭代：[1] value：[[object Object]]
map的.js：69迭代：[2]的值：[[对象的对象]]
maps.js：69迭代：[3]的值：[[对象的对象]]

CODE：

function dropMarkers(markers) { 
     //locations are passed in from php json. variable is defined/populated prior to this .js file. 
     let test = new Promise(function(resolve, reject) { 
     markers = locations.map(addMarkerWithTimeout); 

     resolve(markers); 
     }); 

     test.then(function(value){ 
     console.log('markers before clustering'); 

     //console dump is showing that markers are being populated correctly. I believe the problem is with the .push method above 
     console.log(value); 
     clustering(value); 
     }); 
    } 


    function addMarkerWithTimeout(position, timeout) { 
     let prom = new Promise(function(resolve, reject) { 
     window.setTimeout(function(){ 
      resolve(new google.maps.Marker({ 
        position: position, 
        map: map, 
        animation: google.maps.Animation.DROP})); 
     }, timeout*300); 
     }); 

     prom.then(function(value) { 
     console.log('iteration: [' + timeout + '] value: [' + value +']'); 
     return value; 
     }); 
    } 


    //add a marker clusterer to manage the markers. 
    function clustering(markers) { 
     console.log('markers after callback'); 
     console.log(markers); 

     markerCluster = new MarkerClusterer(map, markers, { 
     imagePath: 'images/m'}); 
    } 

Answer 1

在dropMarkers，要等待所有的标记来解决 - 这一点，Promise.all是首选武器：

function dropMarkers(markers) { 
    //locations are passed in from php json. variable is defined/populated prior to this .js file. 
    Promise.all(locations.map(addMarkerWithTimeout)) 
    .then(function(value){ 
     console.log('markers before clustering'); 

     //console dump is showing that markers are being populated correctly. I believe the problem is with the .push method above 
     console.log(value); 
     clustering(value); 
    }); 
} 

如果您呼叫dropMarkers，并希望在完成时“等待”，只需return Promise.all ...并使用

dropMarkers([]).then(... 

在addMarkerWithTimeout - 要返回无极

function addMarkerWithTimeout(position, timeout) { 
    return new Promise(function(resolve, reject) { 
     window.setTimeout(function(){ 
      resolve(new google.maps.Marker({ 
       position: position, 
       map: map, 
       animation: google.maps.Animation.DROP 
      })); 
     }, timeout*300); 
    }) 
    .then(function(value) { 
     console.log('iteration: [' + timeout + '] value: [' + value +']'); 
     return value; 
    }); 
} 

我希望这有助于