2010-12-11 17 views
3

Ich habe eine Web-App, die eine Tonne $.post() Anforderungen macht. Der Server muss diese in der Reihenfolge erhalten, in der sie erstellt wurden. Um dies zu gewährleisten, dachte ich zuerst, ich würde meine eigene Warteschlange erstellen, die den nächsten Ajax-Anruf ausschaltete, nachdem der vorherige abgeschlossen war.Synchron Ajax mit jQuery

Dann sah ich, es gibt eine async:false Option mit der Sie mit $.ajax() verwenden können.

Ich habe alle meine Anforderungen geändert, um $.ajax({ async: false, ... }) zu verwenden, aber wenn ich sie in Firebug überwache, werden Anfragen nicht einzeln gesendet, jede nächste Anfrage wird abgefeuert, nachdem die letzte eine Antwort erhalten hat.

Was ist async soll dann tun? Wie kann ich meinen Ajax pipen, so dass einer zu einem Zeitpunkt ausgeführt wird, der nächste, wenn der letzte abgeschlossen ist (erhaltene Antwort)?

Antwort

7

Anstatt async:false zu verwenden, könnten Sie eine Funktion erstellen, die rekursiv vom Rückruf aufgerufen wird.

function sendReq(arr) { 
    var current = arr.shift(); // Remove the first item from the Array. 
    $.ajax({ 
     url: current.url,  // Use the url from the first item. 
     success: function(dat) { 
      current.func(dat); // Call the function of the first item. 
      if(arr.length)  // If there are items left in the Array, 
       sendReq(arr); //  make a recursive call, sending 
     }       //  the remainder of the array. 
    }); 
} 

// Ordered collection of requests to be made. 
var req_set = [ 
    {url:'someurl', func:function(dat) { /*do something with dat*/ }}, 
    {url:'anotherurl', func:function(dat) { /*do something with dat*/ }}, 
    {url:'someother', func:function(dat) { /*do something with dat*/ }} 
]; 
// Start the first call, sending the entire set. 
sendReq(req_set); 

Also im Grunde:

  • ein Array von Objekten machen, dass die benötigten Elemente für die Anforderungen enthalten.
  • Erstellen Sie eine Funktion, die das Array akzeptiert.
  • Die Funktion entfernt das erste Element aus dem Array und verwendet dieses Objekt zum Füllen der Anforderungseigenschaften.
  • Im Rückruf, nachdem die Funktion für dieses Element aufgerufen wurde, führen Sie einen rekursiven Aufruf an die Funktion und übergibt den Rest des Array.
  • Dies wird die rekursiven Aufrufe fortsetzen, bis das Array leer ist.