JavaScript - callback - waiting for multiple functions to end

Question

I count the shortest path to the destination point from many different origin points with google maps api. I decided to do it this way : (count for each pair of points than save results to array and than check at the end which is best). But i have problem with callback - because as comments says array is always zero - because this code is performed before all requests to count the route length.

function foo(){
var directionsService = new google.maps.DirectionsService();
var destination = new google.maps.LatLng(x,y);
var arrayOfRes= [];

for(var index in originPoints){
    var request = {
        origin:originPoints[index].marker.position,
        destination:destination,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                var res = {};
                res.length = result.routes[0].legs[0].distance.value;
                res.index = index;
                res.result = result;
                arrayOfRes.push(res);
            }
     });
}
  //here arrayOfRes.length is always 0
if(arrayOfRes.length>1)
{
    var bestResult = arrayOfRes[0];

    for(var i = 1; i < arrayOfRes.length; i++)
    {
        if(bestResult.length > arrayOfRes[i])
            bestResult = arrayOfRes[i];
    }

    console.log("Best is" + bestResult.length);
}
else if(arrayOfRes.length ==1)
{
    var bestResult = arrayOfRes[0];
}
 }

How to write function with callback so that it wait until all requessts are ended?

dude..common..you can crop the question..make it shorter,you definately get more replies when you ask something in a simpler way.. — HIRA THAKUR
– HIRA THAKUR, Commented Nov 11, 2013 at 19:58
This question has been answered a lot of times. Do your best and try to find an answer. — putvande
– putvande, Commented Nov 11, 2013 at 20:01
You probably should make yourself familiar with promises, callbacks and asynchronous JavaScript in general. — hugo der hungrige
– hugo der hungrige, Commented Nov 11, 2013 at 20:01
@hugoderhungrige - promises could be used, but if they don't have a promises library handy, this can be solved with a simple check in the callback to see if this is the completion of the last request (as I've shown in my answer). — jfriend00
– jfriend00, Commented Nov 11, 2013 at 20:09
@jfriend00 yes using the callback of google maps directionsService is the best bet here, I agree. I just wanted to point out that it's an asynchronous request he is doing, but didn't make myself very clear.. (: — hugo der hungrige
– hugo der hungrige, Commented Nov 11, 2013 at 20:13

jfriend00 · Accepted Answer · 2013-11-11 20:08:27Z

Google requests like this are asynchronous so you have to write asynchronous code which means ONLY working with the returned data from the callback.

In your callback function that returns a route, you need to check if this is the answer to the last request. If so, then your array has all the results and you can then process the array.

Assuming that originPoints is an array, you could do it like this:

var arrayOfRes = [];
for (var index = 0; index < originPoints.length; ++index) {
    var request = {
        origin:originPoints[index].marker.position,
        destination:destination,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            var res = {};
            res.length = result.routes[0].legs[0].distance.value;
            res.index = index;
            res.result = result;
            arrayOfRes.push(res);

            // check if all data has arrived
            if (arrayOfRes.length === originPoints.length) {
                // put code here to process arrayOfRes
            }
        }
    });
}

Note: javascript does not have the ability to make your code wait for all the requests to be done and then continue - thus you have to use an asynchronous programming style with the flow of code continuing from the callback.

Note: because directionsService.route is an asynchronous call, it will call its callback sometime in the future. In the meantime, you JS will continue to execute. That means that the code that comes right after this block of code will execute BEFORE the ajax calls have completed and before arrayOfRes is populated. As such, the ONLY place you can safely use the arrayOfRes data is in the callback itself or in a function that you call from the callback.

Collectives™ on Stack Overflow

JavaScript - callback - waiting for multiple functions to end

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related