Running multiple asynchronous functions and waiting for results

Question

I'm trying to write a function for Google Maps API v3. Basically, I'm looping through all polygon points for a given shape and add them to a database by passing each point to a PHP function which inserts the data into MySQL.

    function saveSite() {

        // Create an array to hold the individual point saving results
        var submission_Result = [];
        var final_result = true;

        // Get the general properties for this shape
        var shape_ID = selectedShape.ID;
        var shape_Name = document.getElementById("info_name").value;
        var shape_Description = document.getElementById("info_description").value;
        var shape_Type = shapesArray[shape_ID].type;    

        var shape_Points = selectedShape.getPath();

        // Run through all points in the shape and save them
        for (var i = 0; i < shape_Points.length; i++) {
            var curPoint = shape_Points.getAt(i);

            // Prepare the point data to be saved
            var url = pageDir + "phpsqlinfo_addShapeData.php?db=" + database + "&job=" + jobnumber +
                      "&stype=" + shape_Type + "&snumber=" + shape_ID + "&sname=" + encodeURIComponent(shape_Name) + 
                      "&sdesc=" + encodeURIComponent(shape_Description) + "&sseqno=" + i + "&slat=" + curPoint.lat() + "&slng=" + curPoint.lng();

            // Attempt to save the shape data
            downloadUrl(url, function(data, responseCode) {
                if (responseCode == 200 && data.length <= 1) {
                    submission_Result.push(true);
                } else {
                    submission_Result.push(false);
                }
            });
        }

        // Run through all point results and confirm correct submission of points
        for (var i = 0; i < submission_Result.length; i++) {
            if (submission_Result[i] == false) {
                final_result = false;
            }                
        }

        // If all points were successfully saved, tell the user
        if (final_result == true) {
            // All points saved successfully so do something
        } else {
            // Something went wrong and not all points were added so do something else               
        }
    }

I know that the *downloadURL*runs as an asynchronous function and thus i can't currently loop through the *submission_result* array and check whether all points were added correctly. My question is, is there any way i can wait for all of the asynchronous calls to finished and then check the result array?

Maybe something like this for example?:

                        });
        }

        while (submission_Result.length < shape_Points.length) {
            // Do something wait a short while
        };

        // Run through all point results and confirm correct submission of points
        for (var i = 0; i < submission_Result.length; i++) {

Any ideas would be greatly appreciated as I'm totally stumped!

Thanks in advance.

Answer 1

You have to check this in the callbacks passed downloadUrl, e.g.:

downloadUrl(url, function(data, responseCode) {
   //...

   if (submission_Result.length === shape_Points.length)
      allResultsReady();
});

If all results are in, the function allResultsReady will be called.

Using a loop would block the entire browser window which is definitely not what you want.