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。