javascript - Collect AJAX results in order - Stack Overflow

admin管理员组

文章数量:1336367

I have an array of values (myarray), that I want to iterate through and run an AJAX request on each iteration. I've put each ajax request inside another array (requests), so that I can call an alert when all AJAX requests have pleted:

Like so:

var requests = [];
for (i = 0; i < myarray.length; ++i) {
    requests.push($.ajax({
        url: 'anotherurl?=' + myarray[i],
        dataType: "JSONP",
        success: function (data) {
          array_of_results.push(data);
        }
    }));
}
$.when.apply($, requests).done(function() {
    alert('plete');
});

All the results are collected in array_of_results. However due to the AJAX requests taking different lengths of time to plete, this array doesn't have the results in the original order.

Is there any way to order this array?

I hope I've made sense. I appreciate this is quite convoluted.

I have an array of values (myarray), that I want to iterate through and run an AJAX request on each iteration. I've put each ajax request inside another array (requests), so that I can call an alert when all AJAX requests have pleted:

Like so:

var requests = [];
for (i = 0; i < myarray.length; ++i) {
    requests.push($.ajax({
        url: 'anotherurl?=' + myarray[i],
        dataType: "JSONP",
        success: function (data) {
          array_of_results.push(data);
        }
    }));
}
$.when.apply($, requests).done(function() {
    alert('plete');
});

All the results are collected in array_of_results. However due to the AJAX requests taking different lengths of time to plete, this array doesn't have the results in the original order.

Is there any way to order this array?

I hope I've made sense. I appreciate this is quite convoluted.

• javascript
• jquery
• arrays
• ajax

Share Improve this question Follow asked Aug 3, 2016 at 13:21 LeeLee 1,49522 gold badges2828 silver badges4747 bronze badges 3

• 1 ajax call in a for loop . Is it necessary ? – Amar Singh Commented Aug 3, 2016 at 13:25
• It's best to do this job by utilizing Promises. Such as mapping your array into a promises array (say myPromiseArray) and then invoking Promise.all(myPromiseArray).then(onFulFillment, onReject) Where the onFulfillment and onReject callbacks will be provided with an array of results ing from the promises in the original order. – Redu Commented Aug 3, 2016 at 13:41
• Asi understand the $.ajax() call returns an jqXHR object which since V1.5 harbors all properties, methods and behavior of Promise interface. So implementing what i have mentioned in the above ment should be a bliss. For more on that api.jquery./jquery.ajax/#jqXHR – Redu Commented Aug 3, 2016 at 14:03

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

Have you tried the following? I think this should work. All the responses should be available, in order, in the success function of the when().

var requests = [];
for (i = 0; i < myarray.length; ++i) {
    requests.push($.ajax({
        url: 'anotherurl?=' + myarray[i],
        dataType: "JSONP"
    }));
}
$.when.apply($, requests).done(function() {
    array_of_results = arguments;
    alert('plete');
});

Instead of using a loop consider using recursion. Here's a plete example:

var myArray = [
    "somevalue",
    "some other value",
    "another value"
];
var i = myArray.length;
var responses = [];

function doRequests(){
    i--;
    $.ajax({
        url: "myurl.php",
        data: {paramname: myArray[i]}
    }).done(function(response){
        responses.push(response);
        if(i>0) doRequests();
        else{
            // all requests sent.. do stuff
            // responses array is in order
            console.log(responses);
            alert("all done!");
        }
    });
}

You can add a custom attribute to your $.ajax object, setted to your i var.

var requests = [];
for (i = 0; i < myarray.length; ++i) {
    requests.push($.ajax({
        url: 'anotherurl?=' + myarray[i],
        dataType: "JSONP",
        myCustomIndex: i,
        success: function (data) {
          array_of_results[this.myCustomIndex] = data;
        }
    }));
}
$.when.apply($, requests).done(function() {
    alert('plete');
});

JavaScript is really permisive, if you attribute a value to an array out of its bounds (higher than 0), the size of the array will be automaticaly set to the right amount.

How about using jquery.ajax call with async setting as false. This way the reaponse will be in order as requested...

Building on @Christo's answer - using arrays map function

var array_of_results = [];
var requests = myarray.map(function(item, index) {
    return $.ajax({
        url: 'anotherurl?=' + item,
        dataType: "JSONP",
        success: function (data) {
            array_of_results[index] = data;
        }
    }
});

...

本文标签： javascriptCollect AJAX results in orderStack Overflow