Skip to content

jQuery.ajaxQueue

by gnarf on June 21st, 2011

I’m starting to put together an example of using .queue(), jQuery.Deferred(), jQuery.ajax() together to create a queue for ajax requests.

It is a front-end for jQuery.ajax() and takes the same options/arguments as any standard ajax call, just makes sure that only one ajax call can be running at a time.

Take a look at the gist.

/*
* jQuery.ajaxQueue - A queue for ajax requests
*
* (c) 2011 Corey Frang
* Dual licensed under the MIT and GPL licenses.
*
* Requires jQuery 1.5+
*/
(function($) {

// jQuery on an empty object, we are going to use this as our Queue
var ajaxQueue = $({});

$.ajaxQueue = function( ajaxOpts ) {
    var jqXHR,
        dfd = $.Deferred(),
        promise = dfd.promise();

    // queue our ajax request
    ajaxQueue.queue( doRequest );

    // add the abort method
    promise.abort = function( statusText ) {

        // proxy abort to the jqXHR if it is active
        if ( jqXHR ) {
            return jqXHR.abort( statusText );
        }

        // if there wasn't already a jqXHR we need to remove from queue
        var queue = ajaxQueue.queue(),
            index = $.inArray( doRequest, queue );

        if ( index > -1 ) {
            queue.splice( index, 1 );
        }

        // and then reject the deferred
        dfd.rejectWith( ajaxOpts.context || ajaxOpts, [ promise, statusText, "" ] );
        return promise;
    };

    // run the actual query
    function doRequest( next ) {
        jqXHR = $.ajax( ajaxOpts )
            .then( next, next )
            .done( dfd.resolve )
            .fail( dfd.reject );
    }

    return promise;
};

})(jQuery);

/*
* jQuery.ajaxQueue - A queue for ajax requests
*
* (c) 2011 Corey Frang
* Dual licensed under the MIT and GPL licenses.
*
* Requires jQuery 1.5+
*/
(function(a){var b=a({});a.ajaxQueue=function(c){function g(b){d=a.ajax(c).then(b,b).done(e.resolve).fail(e.reject)}var d,e=a.Deferred(),f=e.promise();b.queue(g),f.abort=function(h){if(d)return d.abort(h);var i=b.queue(),j=a.inArray(g,i);j>-1&&i.splice(j,1),e.rejectWith(c.context||c,[f,h,""]);return f};return f}})(jQuery)

From → jQuery

  • Greg Hearn

    works well, thanks for helping me out.

  • Greg Hearn

    Does not seem to work in IE7 and IE8

    • http://momentumworkshop.com Corey Frang

      “Doesn’t work” isn’t very useful…. :) Any chance you could give me some more details about what didn’t work?

  • Greg Hearn

    As usual with anything IE, make sure you are sending as POST, also append a timestamp to the url just incase. Thanks microsoft….

  • Sébastien Van Eyck

    Any chance that you add an example ? I don’t really get how to use it… (especially availables parameters)

    • http://momentumworkshop.com Corey Frang

      Sorry for the confusion, I just added a line to the blog post:

      It is a front-end for jQuery.ajax() and takes the same options/arguments as any standard ajax call, just makes sure that only one ajax call can be running at a time.

      In other words, look at http://api.jquery.com/jQuery.ajax for a list of options, the only thing this does is make sure that only one request is running at a time.

  • Erick Njenga

    Works Brilliantly on Chrome. Thanks a lot.

  • Neokeudo

    hi,

    how can i clean the queue ? (prevent jquery from making next ajax request ?)

    • http://momentumworkshop.com Corey Frang

      I hadn’t really needed that feature for what I was writing, but you could add $.ajaxQueue.stop = function( clear ) { ajaxQueue.stop( clear ); }