Async Promises Inside For Loop

Question

I want to get a route every time if inside for loop is true.

It shows if HIT ${j} as expected and then getSinglePart(partPath) fires, shows log 1 as expected, and then it should return res to getSinglePart(partPath).then(res) right after log 1.

But getSinglePart().then((res)) shows all routes at once after the for loop has ended!

Why is that even tho it returns a promise? And how to fix that?

Thanks in advance :)

function getSinglePart(partPath){
return new Promise((resolve, reject) => {
    console.log('log 1');
    let tempDirectionsService = new google.maps.DirectionsService;
    let tempElevationService = new google.maps.ElevationService;
    let tempDirectionsRenderer = new google.maps.DirectionsRenderer({draggable: true, map: store.getState().map});
    tempDirectionsService.route({
        origin: partPath[0],
        //waypoints: waypointsArray,
        destination: partPath[partPath.length-1],
        travelMode: 'WALKING',
        avoidTolls: true
    }, (res, status) => {
        resolve(res);
    });
});}

function getParts(response){
let distances = [];
let legs = response.routes[0].legs;

for(let i=0; i<legs.length; i++){
    let steps = legs[i].steps;
    let distanceCounter = 0;
    let partsCounter = 0;
    let startNextIndexes = [0];

    for(let j=0; j<steps.length; j++){
        distances.push(steps[j].distance.value);
        distanceCounter += steps[j].distance.value;

        if(distanceCounter > 100000 || j === steps.length-1){
            startNextIndexes.push(j+1);
            let partPath = [];
            distanceCounter = 0;

            console.log(`if HIT ${j}`);
            for(let k=startNextIndexes[partsCounter]; k<=j; k++){
                for(let l=0; l<steps[k].path.length; l++){
                    partPath.push(steps[k].path[l]);
                }
            }

            getSinglePart(partPath).then((res) => {
                console.log('then');
                console.log(res);
            });
        }
    }
}}

@Bergi nope, it lives its own life :D I will try to read links from the comment below ;) — gdziemojkomp, May 22 '17 at 14:46
You might also want to elaborate on what you trying to accomplish. Perhaps, you don't actually need to wait on each iteration to complete and can simply do your processing outside the loop. — Maksym, May 22 '17 at 15:34
@Maksym yea i think i will end up doing exactly what you said. I even thought about it earlier but wanted to solve it this way. Thanks for helping tho :) — gdziemojkomp, May 22 '17 at 16:30

score 0 · Answer 1 · answered May 22 '17 at 14:35

The described behaivor seems to be correct, since you are essentially scheduling a bunch of 'tempDirectionsService.route' functions to be processed asynchronously, then exit your loop, and then wait for 'tempDirectionsService.route' to be complete (each 'then' gets printed as each 'tempDirectionsService.route' is complete, in no particular order, could be during the loop or could be after it). If your goal is to wait for a currently scheduled 'tempDirectionsService.route' to be complete before proceeding to the next iteration of the loop - you will have to rewrite your loop accordingly. For example:

JavaScript ES6 promise for loop

Correct way to write loops for promise.

Async Promises Inside For Loop

1 Answers1