jQuery Limite el número de solicitudes AJAX simultáneas

Question

así que tengo una serie de eventos AJAX que me gustaría despedir, pero quiero limitar el número de solicitudes simultáneas a 5 y poner en cola el resto. Así, por ejemplo, tengo el siguiente:

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

por lo que puede haber 100 divs con la clase server, pero sólo quiero correr 5 solicitudes en un momento dado. Una vez que una solicitud finaliza debe pasar a la siguiente.

¿Cuál es la mejor manera de hacerlo?

Answer 1

La mejor manera de hacerlo es dejar que el navegador se encargue de ello. Por lo general, los navegadores ya tienen un límite de conexión por host, por lo que pondrán en cola automáticamente las conexiones si hay demasiadas.

Sin embargo, consideraría cambiar la API, por lo que toma la fecha de varios elementos y también devuelve datos para varios elementos, es decir, reduce el número total de solicitudes HTTP necesarias.

Answer 2

Oprima todos los argumentos de solicitud en una cola con una función llamada queueRequest y llame al checkQueue. checkQueue comprueba si hay elementos en la cola y si el número de solicitudes activas es menor que 5. Si se cumplen estas condiciones, aparece una solicitud de la cola y la convierte en una solicitud real de AJAX. A continuación, adjunta un controlador done a la solicitud que disminuye el recuento de solicitudes activas y llama al checkQueue.

Answer 3

Si todavía no está seguro acerca de las capacidades de tu navegador en cola las peticiones, podría intentar algo como esto:

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); 
     }); 
    }); 
}); 

Es posible que tenga que ajustar a sus necesidades.