How to manage queues of ajax requests in jquery 1.5?

Question

I have been testing the new deferred AJAX functions in jquery 1.5 and am impressed with their simplicity and power. There's a larger question I have related to the best way to queue up these requests.

I have two scenarios: serial and parallel, if you will. I want to avoid the sync/async terms because I do want all of these to be asynchronous requests so the user can perform other actions while waiting for the queue to process. I then want to call a single function when the queue has completed processing.

In "serial mode" having two requests I would want them processed as follows:

RequestA -> ResponseA -> RequestB -> ResponseB -> EndOfQueue

In "parallel mode" with two requests I want this result:

RequestA -> RequestB (ResponseA, ResponseB processed whenever ready) -> EndOfQueue

In either case, if any Request fails I would want the queue to stop and pass control to a failure function.

I have requirements that specify a dynamic queue length so I don't think I'll be able to just string a bunch of .then() or .when() deferreds together as I won't know if it's one or one hundred items. I'm executing business logic on a server via a vendor's API so server-side batching will be difficult as I don't have control over that code.

I have built test cases that perform the "parallel" case and call the when() function after all have successfully completed, but these tests aren't dynamic in queue length and aren't portable to the serial model.

I can see how I could create a custom queue object to handle this, but it seems like all of the parts are already written for me in jquery (?). I've looked, but haven't found an example that covers sequential requests in this way.

Any thoughts on how to handle this with the jquery queue/deferred functionality?

Answer 1

The simplest way to achieve your RequestA -> ResponseA -> RequestB -> ResponseB order would be using something like this:

var queue = [];

function qNext() {
    $.ajax(queue.shift()).success(qNext);
}

function qAjax(options) {
    queue.push(options);
}

qAjax({
    // $.ajax options
});

qAjax({
    // $.ajax options
});

qNext();

See DEMO.

This is a somewhat simplified version of your requirements but it would be easy to add a callback to run after the queue is empty.

Are you sure you don't want the order of RequestA -> RequestB -> ResponseA -> ResponseB?

Answer 2

Please refer to the two questions I asked

1. jQuery Deferred not working
2. jQuery.when understanding

Hopefully you should be able to understand the concept.