jQuery異步調用順序

Question

我是Jquery的新手，有一些代碼循環遍歷數組，並在每次循環迭代時從ajax請求中加載HTML：

$.each(arr, function (data) {
    $.get('/Quote/LoadQuoteItemCost', { 'i': i }, function (html) {
        $('#myTable).append(html);
        // There are a few more lines which modify the html which I've left out
    });
    i++;
});

我的問題是，由於JQuery的異步特性，我認為響應是以隨機順序附加到#myTable的。 如何確保我的響應按照遍歷數組的順序添加到表中？

我嘗試過async = false，但是在我的瀏覽器中已經貶值了（並且看到很多帖子說不使用它）

Answer 1

這是我將使用本機（對於某些瀏覽器）進行操作的方式

Promise.all(arr.map(function(data, i) {
    return $.get('/Quote/LoadQuoteItemCost', { 'i': i });
})).then(function(results) {
    results.forEach(function (html, n) {
        var data = arr[n];
        $('#myTable').append(html);
        ...
    });
});

jQuery的等效項似乎是$.when ，但是它接受多個（promise）參數（而不是Promises數組），並且then函數接收多個“結果”，而不是單個結果數組-因此整個過程將與上面的“（幾乎）純JS”有些不同-但這應該可以助您一臂之力

編輯：我覺得這樣做很臟，但是我相當有信心這會比我不喜歡的情況下使用更多的jQuery來完成你想要的：p

$.when.apply(null, $.map(arr, function(data, i) {
    return $.get('/Quote/LoadQuoteItemCost', { 'i': i });
})).then(function() {
    $.each(arguments, function (n, html) {
        var data = arr[n];
        $('#myTable').append(html);
        ...
    });
});

Answer 2

我現在在小提琴和代碼中在注釋中解釋的概念：

var responses = [],
    highestNumber = -1,
    highestReceivedNumber = -1;
function handleResponse(id, data) {
    highestReceivedNumber = Math.max(highestReceivedNumber, id);
    responses[id] = data;
    if(id===highestNumber+1)
        for(i=id;i<=highestReceivedNumber;i++)
            if(!responses[i]) return;
            else $('div:eq(0)').append(responses[i]) && highestNumber++;
}

看看這個小提琴： http : //jsfiddle.net/4udeg6wz/

Answer 3

在$ .get成功之前，您應該對$ .get進行其他調用，並以遞歸的方式進行回調，並在整個數組“ arr”被消耗時保持計數器/變量停止遞歸。 這樣，只有在先前的$ .get的響應返回后，才會啟動下一個$ .get。