jQuery synchronous non-blocking ajax calls

Question

In my web application, I have a series of ajax calls that are fired rapidly. On the server, these need to be processed in the same order as they are sent from the client.

I have been using the async: false configuration in jQuery to do this. However this causes the GUI to become very sluggish while it blocks for calls to finish. With async: true the GUI is responsive, but the requests are not always processed in order.

Is there an alternative non-blocking way to queue up ajax requests, so the next one is sent only after the previous one has finished?

NOTE: I don't have a "list" of requests to process. The requests are generated on the fly, so I need to be able to stuff them into some sort of a FIFO queue when they are generated, then consume the queue with some process.

Answer 1

It can be done easily with jQuery promises:

function firstAjax() {
    return $.ajax({...});
}

function secondAjax() {
    return $.ajax({...});
}

firstAjax().pipe(secondAjax).pipe(...).done(function() {
    alert('all requests have successfully finished');
});

or

$.when(firstAjax()).pipe(secondAjax).pipe(...).done(function() {
    alert('all requests have successfully finished');
});

http://jsfiddle.net/zerkms/WQcVD/1/