如何使用JQuery $ .when按順序處理ajax調用？

Question

如何在JQuery中使用$.when和鏈式承諾來確保我的ajax請求以正確的順序完成？

我有一個名為costArray的數組，它由許多動態對象組成。 對於此數組中的每個項目，我將調用一個名為GetWorkOrder的Ajax請求，該請求返回一個WorkOrder ，它基本上是一個帶有.workOrder類的表行元素，並將其附加到id為#tbodyWorkOrders的表中。

一旦陣列中的所有物品被處理，我用$.when讓我知道什么時候我可以計算出SubTotal每個WorkOrder 。

我的問題是我的WorkOrder是以隨機順序插入的，因為ajax請求正在被處理為異步。 如何確保以正確的順序處理和附加我的​​ajax請求？

i = 0;

$.each(costArray, function (key, value) {
var d1 = $.get('/WorkOrders/GetWorkOrder', { 'i': i }, function (html) {
    $('#tbodyWorkOrders').append(html);
    $('.workOrder').last().find('input').val(value.Subtotal);
});

$.when(d1).done(function () {
    SetSubtotal();
    i++;
});

編輯：

costArray取自早期的ajax調用，是我插入表行的項目數組：

var costArray = JSON.parse([{"Trade":"Plasterer","Notes":"Test","Subtotal":"3781.00"}]);

這條線：

$('.workOrder').last().find('input').val(value.Subtotal);

是從GetWorkOrder獲取值並將它們放入正確輸入的眾多產品之一，但為了清晰起見，我省略了額外的代碼

Answer 1

$.when()處理你並行傳遞的所有promises，而不是順序傳遞（因為異步操作已經在你甚至到$.when()之前已經開始）。

它將按照您將承諾傳遞給$.when()的順序為您收集結果，但不保證傳遞給它的操作的執行順序。

我建議你收集所有結果（按順序），然​​后在完成后按順序插入。

我試圖重構你的代碼，但是不清楚你希望傳遞給Ajax調用的costArray哪些項。 您沒有在代碼中傳遞來自costArray任何內容，但您的問題文本表明您應該這樣做。 所以，無論如何，這是一個如何工作的結構大綱：

var promises = costArray.map(function (value, index) {
    // Fix: you need to pass something from costArray to your ajax call here
    return $.get('/WorkOrders/GetWorkOrder', { 'i': value });
});
$.when.apply($, promises).done(function() {
    // all ajax calls are done here and are in order in the results array
    // due to the wonders of jQuery, the results of the ajax call
    // are in arguments[0][0], arguments[1][0], arguments[2][0], etc...
    for (var i = 0; i < arguments.length; i++) {
        var html = arguments[i][0];
        $('#tbodyWorkOrders').append(html);
    }
    SetSubtotal();
});

Answer 2

將它包裝在一個函數中並從你的ajax成功中調用它：

ajax(0);
function ajax(key) {
    $.get('/WorkOrders/GetWorkOrder', {'i' : key }, 
        function (html) {
            $('#tbodyWorkOrders').append(html);
            $('.workOrder').last().find('input').val(costArray[key].Subtotal);
            SetSubtotal();
            key++;
            if (key < costArray.length)
                ajax(key);
        });
}

編輯：進一步考慮，雖然這是一種方法，但它需要ajax調用一次只執行一次，這不是非常節省時間。 我會用jfreind00的回答。