Sequenciamento de solicitações Ajax

Ao iterar por uma coleção e fazer chamadas Ajax individuais para cada elemento, é essencial controlar a sequência para evitar sobrecarga do servidor e congelamento do navegador. Embora iteradores personalizados possam ser empregados, existem soluções mais elegantes disponíveis.

jQuery 1.5

No jQuery 1.5 e superior, o plugin $.ajaxQueue() aproveita $ .Deferred, $.queue() e $.ajax() para gerenciar o sequenciamento de solicitações e fornecer uma promessa que será resolvida após a conclusão da solicitação.

Implementação:

var jqXHR,
    dfd = $.Deferred(),
    promise = dfd.promise();

ajaxQueue.queue( doRequest );

promise.abort = function( statusText ) {
  if ( jqXHR ) {
    return jqXHR.abort( statusText );
  }
  var queue = ajaxQueue.queue(),
      index = $.inArray( doRequest, queue );
  if ( index > -1 ) {
    queue.splice( index, 1 );
  }
  dfd.rejectWith( ajaxOpts.context || ajaxOpts,
    [ promise, statusText, "" ] );
  return promise;
};

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

return promise;

};

})(jQuery);

jQuery 1.4

Para jQuery 1.4, a fila de animação pode ser utilizada para criar uma "fila" personalizada. Você também pode criar seu próprio plugin $.ajaxQueue() que usa a fila 'fx' do jQuery para iniciar automaticamente a primeira solicitação na fila se ainda não estiver em execução.

Implementação:

var oldComplete = ajaxOpts.complete;

ajaxQueue.queue(function(next) {
  ajaxOpts.complete = function() {
    if (oldComplete) oldComplete.apply(this, arguments);
    next();
  };
  $.ajax(ajaxOpts);
});

};

})(jQuery);

Exemplo:

url: '/echo/html/',
data: {html : "[" idx "] " $(this).html()},
type: 'POST',
success: function(data) {
  $("#output").append($("<li>", { html: data }));
}

});
});

Isso garante que cada solicitação Ajax seja executada sequencialmente, permitindo o tratamento elegante da carga do servidor e mantendo a capacidade de resposta do navegador .