我有这样的事情：循环通过IDS和每一个，使一个Ajax请求（异步：真正的）到服务器（同一个域），并追加接收数据DOM元素。没有一个硬任务来完成，它的工作原理。例如：code：

I have something like this: loop through the ids and for each one, make an ajax request (async:true) to the server (same domain) and append received data to a DOM element. Not a hard task to accomplish, it works. Example code:

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

我的问题是：当我必须通过（1000为例）许多标识循环，它会发送大量的Ajax，和浏览器的冻结，当我点击一个链接，它会等待所有的Ajax请求完成，然后打开点击链接。

My problem is: when I have to many IDs to loop through (1000 for example), it sends a lot of ajax, and the browser "freeze", when I click on a link, it waits all ajax requests to finish, then is opens the clicked link.

超时是不是一种选择，因为我需要表现出尽可能多的接收到的数据成为可能。如果需要1秒来完成，或者如果它需要100秒，与此没有问题的，因为用户将看到已完成其他请求

Timeout isn't an option, because I need to show as many received data as possible. If it takes 1 second to finish or if it takes 100 seconds, no problem with this, because the user will see the others requests that has finished

那么，什么是处理这个最好的方法是什么？停止AJAX请求时点击一个链接如这个？还是有更好的方法来做到这一点。

So, what's the best way to handle this ? Stop the ajax requests when a link is clicked like this ? Or there's a better way to do this

推荐答案

而不是让一个1000的Ajax调用应用程序，你可以让服务器返回的格式的JSON

Instead of making a 1000 ajax calls to the application you can have the server return a json of the format

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

有了这样一个请求

With a request like

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那就太过分了吧。上述code将减少AJAX调用的次数作出从1000减少到1。

Chrome as far as I know can handle 8 concurrent ajax requests at a time, a number like 1000 would be too much for it. The above code would reduce the number of ajax calls made reduce from 1000 to 1.

然而，如果你想至1000ml电话这样的，你最好还是做这样的事情

If however you do want to make 1000 calls like this the you are better off doing something like this

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();
        }
    });
}

在code以下产卵的时间一个最大的8 Ajax调用。

The code below spawns a max of 8 ajax calls at a time.

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();

不过，我不建议这样做。你最好用其他一些解决方案，像分页，如果获取的所有IDS一次内容需要很长的时间。

However I don't recommend doing this. You are better off with some other solution like pagination if fetching the content for all ids at once takes a long time.