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

以下是我使用原生（对某些浏览器）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）参数（而不是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的响应返回后才会启动。

Jquery异步调用按顺序

3 个答案: