Ben bazen bazı toplama yineleme ve bir ajax her öğe için arama yapmak için ihtiyaç bulabilirsiniz. Her çağrı, genellikle diğer sorunlara neden olan istekleri ile sunucu patlama istemiyorum, böylece bir sonraki öğeye geçmeden önce dönmek istiyorum. Ve yanlış zaman uyumsuz ayarlamak ve tarayıcı dondurmak istemiyorum.

Genellikle bu ben sunulmayan her başarı üzerine geri adım yineleyici bağlamda bir tür kurma içerir. Daha temiz, daha basit bir yolu olmalı bence?

Herkes düzgünce bir koleksiyon ajax yapmak her madde için çağırır thru çalışmak ne kadar zekice bir tasarım modeli var mı?

jQuery 1.5

*,* 17*,* 16 $.ajax() ayrıca isteğe tamamlandığında çözümlenen promise aktarmak için kullandığı $.ajaxQueue() bir eklenti geliştirdim.

/*
* 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

Eğer "kuyruk" öğeler için ajax istekleri için. kendi oluşturmak için boş bir nesne üzerindeki animasyon sıraya kullanabilir 1.4, DV kullanıyorsanız

Hatta $.ajax() kendi yerine içine bu faktör. Bu eklenti $.ajaxQueue() standart 'fx' sıra otomatik başlayacak DV için ilk sıraya zaten çalışıyor değil mi eğer eklediğini kullanır.

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

Örnek Kullanım

Biz kopyalamak istediğimiz bazı <li> olan <ul id="items"> (ajax kullanarak!) var <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