Question

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

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

处理完数组中的所有项目后，我会使用$.when告诉我何时可以计算每个SubTotal的{{1}}。

我的问题是我的WorkOrder是以随机顺序插入的，因为ajax请求正在被处理为异步。如何确保以正确的顺序处理和附加我的ajax请求？

WorkOrder

编辑：

costArray来自早期的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++;
});

该行：

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

是从GetWorkOrder获取值并将它们放入正确输入的许多人之一，但为了清晰起见，我省略了额外的代码

Answer 1

$.when()处理你并行传递的所有promise，而不是顺序传递（因为异步操作在你到达$.when()之前就已经开始了。）

它将按照您将承诺传递给$.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();
});

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的答案一起去了。

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

2 个答案: