Question

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

Initially i tried just firing off the 1000 ajax requests inside the .each selector, but the browser was locking up.

So i changed it to try and use an internal ajax counter, so only ever fire off 50 at a time.

Here’s the code:

$('#do').click(function () {
    var maxAjaxRequests = 50;
    var ajaxRequests = 0;
    var doneCounter = 0;
    var toDo = $('#mytable tr').length;

    $.each($('#mytable > tr'), function (i, v) {
        while (doneCounter < toDo) {
            if (ajaxRequests <= maxAjaxRequests) {
                ajaxRequests++;
                doAsyncStuff($(this), function () {
                    ajaxRequests--;
                    doneCounter++;
                });
            } else {
                setTimeout(function() {
                }, 1000);
            }
        }
    });
});

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

But the browser is still being locked up. It never goes into the $.ajax complete callback, even though i can see the request coming back successfully (via Fiddler). Therefore its just sleeping, looping, sleeping, etc because the callback is never returned.

I’ve got a feeling that the entire doAsyncStuff function needs to be asynchronous?

Any ideas on what i am doing wrong (or how i can do this better)?

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