javascript - $.ajax 位于 $.each 阻塞浏览器中

Question

我有这样的事情:循环遍历 ids，并对每个 ids 向服务器(同一域)发出 ajax 请求 (async:true) 并将接收到的数据附加到 DOM 元素。这不是一项艰巨的任务，它确实有效。示例代码:

$.each(ids, function (index, id) {
    $.ajax({
        type: 'POST',
        url: "http://localhost/example/"+id,
        success: function (data) {
            $('#content').append(data);
        }
    });
});

我的问题是:当我有很多ID要循环时(例如1000个)，它会发送大量ajax，并且浏览器“卡住”，当我单击链接时，它会等待所有ajax请求完成，然后打开单击的链接。

超时不是一个选项，因为我需要显示尽可能多的接收到的数据。如果需要 1 秒才能完成或需要 100 秒，这没有问题，因为用户将看到其他已完成的请求

那么，处理这个问题的最佳方法是什么？单击链接时停止 ajax 请求，如 this ？或者有更好的方法来做到这一点

Answer 1

您可以让服务器返回以下格式的 json，而不是对应用程序进行 1000 个 ajax 调用

[{ id: 0, content: "A",
id: 1, content: "B",
.
.
id: n, content: "Nth content" }]

像这样的请求

var idList = [];
$.each(ids, function(index, id) {
    idList.push(id);
});
$.ajax({
type: "POST",
data: { id: idList },
success: function(data) {
    $.each(data, function(index, v) {
        $("#content").append(v.content);
    })
}).error(function(response) {
    $("#content").append(response);
});

据我所知，Chrome 一次可以处理 8 个并发的 ajax 请求，像 1000 这样的数字就太多了。上面的代码将减少 ajax 调用的数量，从 1000 减少到 1。

但是，如果您确实想调用 1000 个这样的电话，那么您最好这样做

var idList = [];
$.each(ids, function(index, id) {
    idList.push(id);
});
function makeAjax() {
    $.ajax({
        type: "POST"
        data: { id : idList.pop()},
        success: function(data) {
            $("#content").append(data);
        }
    }).done(function() {
        if(idList.length>0) {
            makeAjax();
        }
    });
}

下面的代码一次最多生成 8 个 ajax 调用。

var idList = [];
$.each(ids, function(index, id) {
    idList.push(id);
});
var MAX_THREADS = 8;
var CURRENT_THREADS = 0;

function makeAjax() {
    CURRENT_THREADS++;
    $.ajax({
        type: "POST"
        data: { id : idList.pop()},
        success: function(data) {
            $("#content").append(data);
        }
    }).done(function() {
        CURRENT_THREADS--;
    });
}

function callAjax() {
    if(CURRENT_THREADS < MAX_THREADS) {
        makeAjax();
    }
    if(idList.length > 0) {
        setTimeout(callAjax, 1000);
    }
}

callAjax();

但是我不建议这样做。如果一次获取所有 id 的内容需要很长时间，那么最好使用其他解决方案，例如分页。