JavaScript for loop inside async function

Question

I am running into promise error inside for loop which is inside async function.

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

How do I get around this ? All I am trying to do is clear all the previous Circles that I might have drawn , before drawing the new one.

What does the error you're getting say? The screenshot just shows the promise object. Also, since the event handler is synchronous, the async process will happen at an unpredictable time with relation to the rest of the handler. — Charlie Bamford
– Charlie Bamford, Commented May 27, 2021 at 20:11
displayMarkersOnGoogleMap should not be async, it just creates markers and installs the event listeners, but doesn't wait for anything. — Bergi
– Bergi, Commented May 27, 2021 at 20:31
Is circle.setMap even an asynchronous function? What does it do? What is a circle? — Bergi
– Bergi, Commented May 27, 2021 at 20:32
why don't you simply use for await...of? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Mister Jojo
– Mister Jojo, Commented May 27, 2021 at 20:35

Akash Sarode · Accepted Answer · 2021-05-27 20:16:43Z

2

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

This right here, wont work as you expect it to. forEach loop doesn't work with async callbacks. Even if you explicitly mark your callback function as async, forEach loop wont wait for it to complete the promise.

Instead try with a for...of loop.This would execute whatever is inside synchronously, in the order you normally read the code.

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

answered May 27, 2021 at 20:16

Akash Sarode

4475 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StriplingWarrior Over a year ago

Yup. Or, if you want things to happen concurrently, await Promise.all(circles.map(...))

Collectives™ on Stack Overflow

JavaScript for loop inside async function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related