排序ajax请求

jQuery 1.5+

我开发了一个

$.ajaxQueue()

$.Deferred

.queue()

$.ajax()

 (function($) {// jQuery on an empty object, we are going to use this as our Queuevar 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

如果您使用的是jQuery 1.4，则可以在一个空对象上利用动画队列来为自己的对元素的Ajax请求创建自己的“队列”。

您甚至可以将此作为自己的

$.ajax()

$.ajaxQueue()

(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);

用法示例

因此，我们有一个

<ul id="items">

<li>

<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示范 -
1.4版本