jQuery Ajax: how to wait until *async* requests success completes before continuing?

Question

I'm having a problem making ajax fast and functional. Here's the pseudo/prototype code:

function blah1(arg1){//arg1 is an array, roughly 10 elements

var arr[];

$.each(arg1, function(i){
//blah code

    $.ajax({
        //blah options
        async:   true,
        success: function(data){
            arr[i] = data.someInt;
        }//end success
    });//end ajax
}//end each

return arr;
}//end function

Basically, I'm sending an ajax and need the returned data for further processing.

If I set async to true, the function immediately returns empty 'arr' array, thus the whole script fails. But if I set async to false, then it works, but takes very long.

I have seen this $.ajaxQueue(); thing, but frankly I don't understand it at all, and I don't know if it will work.

So the question is, firstly, is there any way I can asynchronously send all the ajax requests at the same time and let function wait and return arr[] after all ajax are done? If not, will the ajaxQueue work in my case? (rough example please?)

Answer 1

Using jQuery 1.5 deferred's I would opt for this :

function blah1(arr, callback){
    $.when($.map(arr, function(val, i){
        $.ajax({
            //blah options
            async:   true
        });
    }).toArray()).then(function(resultsArr) {
         callback(resultsArr);
    });
}

The problem was you were trying to return the array in your function before the async ajax calls finish. This isn't really possible so you will need to pass a callback to blah.

What your doing here is mapping your array of objects to jqXHR objects (which are deferred objects). Then passing that array of deferred objects to $.when.

$.when takes an array and then allows you to run the .then function when the entire array has finished loading from the ajax calls. You then have a resultsArr passed in as an argument to your .then function.

There is no way to use $.ajax and return in the same function if you manipulate the return value in your ajax success call.

Answer 2

You could make the Ajax call synchronous which you seem to know about, personally I would re factor my code so the success method of the ajax call, then triggers a call off to another function.

$.ajax({
        //blah options
        async:   true,
        success: function(data){
            arr[i] = data.someInt;
            myCall(arr[i]);
        }//end success
    });//end ajax