jQuery Limita il numero di richieste AJAX simultanee

Question

quindi ho una serie di eventi AJAX che vorrei attivare, ma voglio limitare il numero di richieste simultanee a 5 e accodare il resto. Così, per esempio, ho il seguente:

$("div.server").each(function() { 
    $.ajax(....); 
}); 

Quindi ci possono essere 100 div con la classe server, ma voglio correre solo 5 richieste in un dato momento. Una volta che una richiesta è finita, dovrebbe procedere alla successiva.

Qual è il modo migliore per farlo?

Answer 1

Il modo migliore per farlo è consentire al browser di gestirlo. Di solito i browser hanno già un limite di connessione per host in modo che accodano automaticamente le connessioni se ce ne sono troppe.

Tuttavia, prenderei in considerazione la possibilità di cambiare l'API in modo da richiedere la data da più elementi e restituire anche i dati per più elementi, ovvero riducendo il numero complessivo di richieste HTTP necessarie.

Answer 2

Inserire tutti gli argomenti di richiesta in una coda con una funzione denominata queueRequest e chiamare checkQueue. checkQueue controlla se ci sono elementi nella coda e se il numero di richieste attive è inferiore a 5. Se queste condizioni sono soddisfatte, apre una richiesta dalla coda e la trasforma in una vera richiesta AJAX. Quindi allega un gestore done alla richiesta che diminuisce il conteggio delle richieste attive e chiama checkQueue.

Answer 3

Se ancora incerti circa le capacità del suo navigatore web a fare la coda le richieste, si potrebbe provare qualcosa di simile:

var count = 0;   // Number of functions being called 
var funcArray = [];  // Array of functions waiting 
var MAX_REQUESTS = 5; // Max requests 
var CALL_WAIT = 100;  // 100ms 

function call() 
{ 
    // Check if count doesn't exceeds or if there aren't any functions to call 
    if(count >= MAX_REQUESTS || funcArray.length == 0) 
     // Call call() after 100ms 
     setTimeout(function() { call() }, CALL_WAIT); 
    count++;   // Add request to the counter 
    var func = funcArray.pop(); 
    $.ajax(..., function(data) 
    { 
     func(data); 
     // ....... 
     count--;  // Substract request to the counter 
    }); 
} 

$(function() 
{ 
    call();  // First call to start polling. It will call itself each 100ms 
}); 

$(function() 
{ 
    $("div.server").each(function() { 
     funcArray.push(function(data) 
     { 
      alert(data); 
     }); 
    }); 
}); 

Potrebbe essere necessario modificarlo per le vostre esigenze.