$.each 中的 $.ajax 阻塞浏览器

Question

我有这样的事情：遍历 id 并为每个 ID 向服务器（相同域）发出 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 的 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 的内容需要很长时间，则最好使用分页等其他解决方案。

Answer 2

更好的方法是改变您请求数据的方式。

如果可能，请尝试将服务器更改为接受多个 ID，并一次使用所有 ID 发出一个请求。这样，您就可以循环访问数据而不是 AJAX 请求。

考虑一下。对于一个包含 1000 个 ID 的数组，每次您点击该函数时，您都会发出至少 1001 个请求（页面有 1 个请求！）。如果该请求由数据库支持，则有 1000 次单独的数据库命中。

现代网络浏览器只能处理这么多同时发生的 AJAX 请求，然后将其余请求排队等待稍后处理。在您提供的代码中可能没有提高性能的好方法。