$.ajax inside $.each blocking browser

Question

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

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.

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

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

Answer 1

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 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.

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

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

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.

Answer 2

A better approach would be to change the way you're requesting data.

If at all possible, try and change the server to accept more than one ID and make one request with all of the IDs at once. This way, you're looping through data instead of AJAX requests.

Think about it. For an array of 1000 ID's, you're making at least 1001 requests (1 for the page!) every time you hit that function. If that request is backed by a database, that's 1000 separate database hits.

A modern web browser will only handle so many simultaneous AJAX requests before queuing the rest up for processing later. There's probably no good way of increasing performance in the code you've provided.