使用多个jquery .get（）不会按顺序返回数据？

Question

Like the title says, I'm using multiple url's to get my data from and I'm using the jquery .get() method. For example:

var m=0;
$.get(url1).done(function(data) 
{
    list[m] = data;
    m++;
}
$.get(url2).done(function(data) 
{
    list[m] = data;
    m++;
}
$.get(url3).done(function(data) 
{
    list[m] = data;
    m++;
}
$.get(url4).done(function(data) 
{
    list[m] = data;
    m++;
}

I have four url's there and I'm putting the data into a array list[] . I will need the data to be in sequence, meaning list[1] comes from url1, list[2] from url2 and so on.

But the problem is, it's not always in sequence. Sometimes I get data like list[1] from url4 or list[2] from url1. Seems like using multiple .get() functions does not always return the data in sequence. Do you guys know how to get the data return in sequence using the .get() function?

Answer 1

AJAX is asynchronous, and the responses can come in a different order than the order you sent the requests.

One solution is to make m a closure variable that's set at the time you send the request, so you can then fill in the correct list element:

$.each([url1, url2, url3, url4], function(m, url) {
    $.get(url).done(function(data) {
        list[m] = data;
    });
});

Answer 2

One solution is to chain them all together so the success of one get fires off the next get. You could setup another function to be called as the callback when the last get completes. Something like this (haven't tested it)

var m=0;
$.get(url1).done(function (data) {
    list[m] = data;
    m++;

    $.get(url2).done(function (data) {
        list[m] = data;
        m++;

        $.get(url3).done(function (data) {
            list[m] = data;
            m++;

            $.get(url4).done(function (data) {
                list[m] = data;
                m++;
                alldone(data);
            });
        });
    });
});

function allDone(data) {
    //do this when last one completes
}