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

Stack Overflow用户

提问于 2015-09-07 13:51:30

回答 2查看 1.5K关注 0票数 7

如何在$.when中使用带有链式承诺的JQuery，以确保按正确的顺序完成ajax请求？

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

一旦处理完数组中的所有项，我就会使用$.when来告诉我何时可以计算每个WorkOrder的SubTotal。

我的问题是，在处理ajax请求时，WorkOrder的插入顺序是随机的。如何确保以正确的顺序处理和追加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获取值并将它们放入正确输入的众多代码之一，但为了清晰起见，我省略了额外的代码

javascript

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-09-07 13:55:55

$.when()处理所有您并行传递它的承诺，而不是连续的(因为异步操作在您到达$.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();
});

票数 5

Stack Overflow用户

发布于 2015-09-07 14:02:18

将其封装在一个函数中，并将其从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);
        });
}