Sequencing ajax requests

Question

I find I sometimes need to iterate some collection and make an ajax call for each element. I want each call to return before moving to the next element so that I don't blast the server with requests - which often leads to other issues. And I don't want to set async to false and freeze the browser.

Usually this involves setting up some kind of iterator context that i step thru upon each success callback. I think there must be a cleaner simpler way?

Does anyone have a clever design pattern for how to neatly work thru a collection making ajax calls for each item?

Answer 1

jQuery 1.5+

I developed an $.ajaxQueue() plugin that uses the $.Deferred, .queue(), and $.ajax() to also pass back a promise that is resolved when the request completes.

/* * 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 )             .done( dfd.resolve )             .fail( dfd.reject )             .then( next, next );     }      return promise; };  })(jQuery); 

jQuery 1.4

If you're using jQuery 1.4, you can utilize the animation queue on an empty object to create your own "queue" for your ajax requests for the elements.

You can even factor this into your own $.ajax() replacement. This plugin $.ajaxQueue() uses the standard 'fx' queue for jQuery, which will auto-start the first added element if the queue isn't already running.

(function($) {   // jQuery on an empty object, we are going to use this as our Queue   var ajaxQueue = $({});    $.ajaxQueue = function(ajaxOpts) {     // hold the original complete function     var oldComplete = ajaxOpts.complete;      // queue our ajax request     ajaxQueue.queue(function(next) {        // create a complete callback to fire the next event in the queue       ajaxOpts.complete = function() {         // fire the original complete if it was there         if (oldComplete) oldComplete.apply(this, arguments);          next(); // run the next query in the queue       };        // run the query       $.ajax(ajaxOpts);     });   };  })(jQuery); 

Example Usage

So, we have a <ul id="items"> which has some <li> that we want to copy (using ajax!) to the <ul id="output">

// get each item we want to copy $("#items li").each(function(idx) {      // queue up an ajax request     $.ajaxQueue({         url: '/echo/html/',         data: {html : "["+idx+"] "+$(this).html()},         type: 'POST',         success: function(data) {             // Write to #output             $("#output").append($("<li>", { html: data }));         }     }); }); 

jsfiddle demonstration - 1.4 version