Asynchrones Iteration Pattern

Ein nettes Pattern wenn man in JavaScript z.B. über eine Liste iterieren will, anhand deren man ajax – Calls staret. Hierbei tritt ja das Problem auf das man nicht zu viele Verbindungen aufn einmal öffnen kann. Nun bietet sich der Einfachheit wegen eine simple foreach Schleife an, bei der man pro Element abwartet bis die Antwort da ist. In jQuery würde dies dann ca so aussehen


$.ajax({
url: "url.php",
data: "data1=1",
async: false
}).done(//successhandler);

Dies führt aber zu den Problem das der Browser dadurch „steht“ (Ausnahme ist hier Firefox). Dies kann durch interne JavaScript Optimizer sogar dazuführen das eventuell ausgeführte Logik zum ein- und ausblenden erst danach geschieht (getestet mit der aktuellen Version von Google Chrome).

Abhilfe schafft hier das Asynchrone Iteration Pattern. Dies könnte wie folgt aussehen:


function iterate(){
 var data = "data1=1";
 var liste = [1,2,3,4,5,6,7,8,9];
 _next(0);
 return;   
       
 /**
  * Asynchroner Iterator über die Liste
  * @param position
  * @private
  */
  function _next(position){
      $.ajax({
          url: "test.php",
          type: 'POST',
          data: data + "&pos="+position,
      })
      .done(function(){
      //successhandler
      }).fail(function(jqXHR, textStatus, errorThrown){
      //errorhandler
     }).always(function(){
       position++;
       if(position == liste.length){
         return;
       }else{
         _next(position)
      });   
   }
}

Es wird einfach nach jeden fertigen Call, die nächste Position in der Liste aufgerufen, falls noch ein Element vorhanden ist.

Scroll to top