Prevent Ajax Queue From Blocking Browser

Note: simplified example.. I've got a page with 1000 table rows. For each row, i need to 'do some work' on the server via an AJAX call, then in the callback, update that table row

Solution 1:

You are doing a while loop inside the .each callback function, so there is much more ajax request than 1000, the worst is 1000*1000.

You could delay each ajax request with different time.

$('#do').click(function () {
    $('#mytable > tr').each(function (i, v) {
        var $this = $(this);
        setTimeout(function () {
            doAsyncStuff($this, function () {
               console.log('complete!');
            });
        }, i * 10);
    });
});

Solution 2:

The browser gets locked because of the WHILE... You are creating an endless loop.

The while loops runs over and over waiting for the doneCounter to be increased, but the javascript engine cannot execute the success call of the ajax since it is stuck in the while...

var callQueue = newArray();
$('#mytable > tr').each(function(key,elem){callQueue.push($(this));});

var asyncPageLoad = function(){
var tr = callQueue.splice(0,1);
$.ajax({
        url: '/somewhere',
        type: 'POST',
        dataType: 'json',
        data: null,
        contentType: 'application/json; charset=utf-8',
        complete: function () {
            completeCallback();
            asyncPageLoad();
        },
        success: function (json) {
            // update ui.
        },
        error: function (xmlHttpRequest, textStatus, errorThrown) {
            // update ui.
        }
    }
};
asyncPageLoad();

This will call the requests one by one. If you want, simply do a for() loop inside to make maybe 5 calls? And increase the amount if the browser is fine.

Solution 3:

Actually, I prefer to send new request when current request is done. I used this method to dump db tables (in this work). Maybe it gives an idea.

See this link, check all check boxes and click Dump! button. And you can find the source codes here (see dumpAll function).