javascript - 如何使用JQuery $.when按顺序处理ajax调用？

Question

我如何使用 $.when在 JQuery 中使用链式 promise 来确保我的 ajax 请求以正确的顺序完成？

我有一个名为 costArray 的数组它由许多动态对象组成。对于这个数组中的每一项，我将调用一个名为 GetWorkOrder 的 Ajax 请求。返回 WorkOrder这基本上是一个带有类 .workOrder 的表行元素并将其附加到 ID 为 #tbodyWorkOrders 的表中.

处理完数组中的所有项目后，我使用 $.when让我知道什么时候可以计算 SubTotal每个 WorkOrder .

我的问题是我的 WorkOrder s 以随机顺序插入，因为 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() 并行处理您传递给它的所有 promise，而不是顺序处理(因为在您到达 $.when()< 之前异步操作已经开始)。

它会按照您将 promise 传递给 $.when() 的顺序为您收集结果，但无法保证传递给它的操作的执行顺序。

我建议您收集所有结果(按顺序)，然​​后在完成后按顺序插入它们。

我已尝试重组您的代码，但不清楚您希望将哪些项目从 costArray 传递给 Ajax 调用。您没有在代码中传递 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();
});