按顺序收集AJAX结果

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 completed:

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('complete');
});

All the results are collected in array_of_results. However due to the AJAX requests taking different lengths of time to complete, 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.

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('complete');
});

Instead of using a loop consider using recursion. Here's a complete 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!");
        }
    });
}

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;
        }
    }
});

...

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('complete');
});

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.