Question

我在异步函数内部的 for 循环中遇到了 promise 错误。

var circles=[];
async function displayMarkersOnGoogleMap(locations) {
    try {

        for (i = 0; i < locations.length; i++) {
            var latlong = new google.maps.LatLng(locations[i].latitude, locations[i].longitude);
            var marker = new google.maps.Marker({
                position: latlong,
                title: ""
                icon: {
                    url: "https://maps.google.com/mapfiles/ms/icons/red-dot.png", 
                    labelOrigin: { x: 12, y: -10 }
                },
                map: map,
                label: {
                    text: "",
                    color: "red",
                    fontWeight: "bold",
                    fontsize:"16px"
                }
            });
            

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {

                console.warn("Business Marker clicked");
                var distanceInMeters = google.maps.geometry.spherical.computeDistanceBetween(
                    currentPosMarker.getPosition(),
                    marker.getPosition()
            );

                    try {

                        circles.forEach(async (circle) => {
                            await circle.setMap(null);
                        })
                                              
                    } catch (e) {

                    }
                   

                    if (i == undefined)
                        i = 0;

                    setTimeout(() => {
                        var circle = drawCircle(map, latlong, locations[i].rangeLimitInMeters);
                        circles.push(circle);
                    }, 5000);

                   
                var content = "<span style='font-weight: bold;'>" + locations[i].locationName + "</span>"
                content = content + "<br/> " + locations[i].address + "<br/> " + locations[i].city + ", " + locations[i].state;
                if (locations[i].locationOpenStatus == "CLOSE") {
                    content = content + "<br/><span class='badge badge-danger'>" + locations[i].locationOpenStatus + "</span>";
                }
                else {
                    content = content + "<br/><span class='badge badge-success'>" + locations[i].locationOpenStatus + "</span>";
                }
                content = content + "<br/><span style='font-weight: bold;'> Time : </span> " + locations[i].locationStartTime + " To " + locations[i].locationStopTime;
                             
         
                  
                    infowindow.marker = marker;
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                }
            })(marker, i));

            markersArrray.push(marker);
        }

    
    } catch (e) {
        console.error("Javascript:displayMarkersOnGoogleMap:-" + e.errorMessage );
    }
}

我该如何解决这个问题？我想要做的就是在绘制新圆之前清除我可能绘制的所有以前的圆。

Answer 1

circles.forEach(async (circle) => {
  await circle.setMap(null);
})

就在这里，不会像您期望的那样工作。 forEach 循环不适用于异步回调。即使您明确地将回调函数标记为异步，forEach 循环也不会等待它完成承诺。

尝试使用 for...of 循环。这将按照您通常阅读代码的顺序同步执行内部的任何内容。

for(const circle of circles) {
  await circle.setMap(null);
}

异步函数中的 JavaScript for 循环

1 个答案: