Wie sequenziere ich Ajax-Anfragen für eine optimale Kontrolle?

Sequenzierung von Ajax-Anfragen

Beim Durchlaufen einer Sammlung und beim Durchführen einzelner Ajax-Aufrufe für jedes Element ist es wichtig, die Reihenfolge zu steuern Verhindern Sie eine Serverüberlastung und ein Einfrieren des Browsers. Während benutzerdefinierte Iteratoren verwendet werden können, stehen elegantere Lösungen zur Verfügung.

jQuery 1.5

In jQuery 1.5 und höher das Plugin $.ajaxQueue() nutzt $.Deferred, $.queue() und $.ajax(), um die Anforderungssequenzierung zu verwalten und ein Versprechen bereitzustellen, das nach Abschluss der Anforderung aufgelöst wird.

Implementierung:

<br>(function($) {</p>
<p>var ajaxQueue = $({});</p>
<p>$.ajaxQueue = function( ajaxOpts ) {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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;

Nach dem Login kopieren

};

})(jQuery);

jQuery 1.4

Für jQuery 1.4 kann die Animationswarteschlange zum Erstellen einer benutzerdefinierten „Warteschlange“ verwendet werden. Sie können auch Ihr eigenes $.ajaxQueue()-Plugin erstellen, das die „fx“-Warteschlange von jQuery verwendet, um automatisch die erste Anfrage in der Warteschlange zu initiieren, wenn diese nicht bereits ausgeführt wird.

Implementierung:

<br>(function($) {<br> var ajaxQueue = $({});</p>
<p>$.ajaxQueue = function(ajaxOpts) {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var oldComplete = ajaxOpts.complete;

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

Nach dem Login kopieren