javascript - 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++;
});

我的问题是响应被以随机顺序附加到#myTable，我认为这是由于 JQuery 的异步性质。如何确保我的响应按照数组中迭代的顺序附加到表中？

我尝试过 async = false，但它在我的浏览器中已被贬值(并且看到很多帖子说不要使用它)

Answer 1

这是我使用 native (对于某些浏览器)Promise 的方法

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 )参数(而不是 promise 数组)，并且 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);
        ...
    });
});