7

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?)

Community
  • 1
  • 1
JQonfused
  • 85
  • 1
  • 2
  • 5
  • Can't you send all of it in a single AJAX request and parse the results for all of the 10ish answers? – Peeter Mar 23 '11 at 07:20
  • That is possible, but that means I'll have to do the editing on the server side and that's a whole mess for me to dive into. I would prefer to do it on jQuery. – JQonfused Mar 23 '11 at 07:25
  • 1 request is better then 10+ requests. You will end up hitting the browsers request limit. – Peeter Mar 23 '11 at 09:33
  • @Peeter there is a browser request limit? – Raynos Mar 23 '11 at 10:14
  • 1
    It's browser specific last I checked, with IE8 limiting it to 6 paralell connections while FF limits it to 8. The limit on older browsers is 2. – Peeter Mar 23 '11 at 10:25

2 Answers2

5

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.

Raynos
  • 166,823
  • 56
  • 351
  • 396
4

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
RubbleFord
  • 7,456
  • 9
  • 50
  • 80