Queue AJAX calls

The trick is to use the callbacks. You make one ajax call and on its success callback you make the next one.

To do this just add them all to a queue and have a wrapper around it that sends them one by one.

I wrote one a few days ago. I’ll show you an implementation in a second.

// Buffer class. Has a public append method that expects some kind of Task.
// Constructor expects a handler which is a method that takes a ajax task
// and a callback. Buffer expects the handler to deal with the ajax and run
// the callback when it's finished
function Buffer(handler) {
    var queue = [];

    function run() {
        var callback = function () {
             // when the handler says it's finished (i.e. runs the callback)
             // We check for more tasks in the queue and if there are any we run again
             if (queue.length > 0) {
                  run();
             }
        }
        // give the first item in the queue & the callback to the handler
        handler(queue.shift(), callback);
    } 

    // push the task to the queue. If the queue was empty before the task was pushed
    // we run the task.
    this.append = function(task) {
        queue.push(task);
        if (queue.length === 1) {
            run();
        }
    }

}

// small Task containing item & url & optional callback
function Task(item, url, callback) {
    this.item = item;
    this.url = url;
    this.callback = callback
}

// small handler that loads the task.url into the task.item and calls the callback 
// when its finished
function taskHandler(task, callback) {
    $(task.item).load(task.url, function() {
        // call an option callback from the task
        if (task.callback) task.callback();
        // call the buffer callback.
        callback();
    });
}

// create a buffer object with a taskhandler
var buffer = new Buffer(taskHandler);

for (i = 0; i < loadingItems.length; i++) {
    // title attribute is the URL to get
    var ajaxURL = loadingItems[i].attr("title") + '?ajaxPageContent=";
    buffer.append(new Task(loadingItems[i], ajaxURL));
}

Apologies for the wall of code. Just implement your own Task and Handler. The Buffer will work as long as the handler calls the second argument (the callback) when it”s finished handling the task.

Then just pass it a task and a handler. The handler does the ajax and calls the callback from the buffer when the ajax returns.

For your specific example if what your loading takes a long time then this will take a long time to load all 30. The point of ajax is to have the server do stuff in parallel.

A far better solution in your case is to make 30 requests and then catch the results and make sure the results from your ajax calls are only appended to the dom in order. This involves using $.ajax and adding keeping track of order somehow.

That way the server will do it as fast as it can and you can server it in order once you get it. Alternatively if the things your doing are fast then queuing them in a buffer has no penalty.