Activar una función solo después de la finalización de varias solicitudes AJAX

Question

Tengo una función en particular que quiero ejecutar una vez, y solo después de la finalización de varias solicitudes AJAX.

Mi solución actual se ve un poco como esto:

function doWork() { 
    //This is the function to be run once after all the requests 
} 

//some tracking/counting variables 
var ajaxDoneCounter = 0; 
var numOfAjaxRequests = 5; 
var workDone = false; 

function doWorkTrigger() { 
    ajaxDoneCounter++; 
    if(!workDone && ajaxDoneCounter >= numOfAjaxRequests) { 
     workDone = true; 
     doWork(); 
    } 
} 

// ... 

//and a number of ajax requests (some hidden within functions, etc) 
//they look something like this: 
$.ajax({ 
    url: "http://www.example.com", 
    dataType: "json", 
    success: function(data) { 
     //load data in to variables, etc 
     doWorkTrigger(); 
    } 
}); 

Una trampa obvia en lo anterior es que cualquier llamada AJAX que no tiene éxito no aumentará ajaxDoneCount y así doWork() probablemente nunca será llamado. Puedo solucionarlo utilizando la devolución de llamada error dentro de cualquier $.ajax, por lo que no me preocupa demasiado.

Lo que quiero saber es si lo anterior es seguro y/o es una buena práctica.
¿Hay algún truco que me haya perdido, o cualquier otra cosa que pueda funcionar mejor?

Answer 1

Actualización: Dado que jQuery 1.5, deferred objects^[docs] proporcionan una solución más limpia. Have a look at an example here.

---

me gustaría utilizar .ajaxComplete(), que se activará cada vez que una llamada Ajax completado (éxito o error):

var numOfAjaxRequests = 5; 

$(document).ajaxComplete(function() { 
    numOfAjaxRequests--; 
    if(!numOfAjaxRequests) { 
     doWork(); 

    } 
}); 

Entonces no tiene que editar cada petición Ajax.

Incluso puede utilizar .ajaxSend() para ser notificado de iniciar peticiones Ajax, en lugar de codificar (pero no estoy seguro de si esto realmente funciona, tal vez usted experimentará condiciones de carrera):

var numOfAjaxRequests = 0; 

$(document).ajaxSend(function() { 
    numOfAjaxRequests++; 
}); 

Answer 2

I don' Sabe lo suficiente sobre las funciones internas de JavaScript, pero existe el peligro de que la operación:

ajaxDoneCounter++; 

no sea atómica. Si ese es el caso, entonces esto podría estar sujeto a una condición de carrera.

Answer 3

Creo que debería utilizar complete(XMLHttpRequest, textStatus) ajax evento en lugar de éxito (datos, textStatus, XMLHttpRequest).

De acuerdo con jQuery ayuda:

complete(XMLHttpRequest, textStatus) 

Una función que se llamará cuando se ejecutan (después del éxito y devoluciones de llamada de error) los finalizar la petición. La función se pasa dos argumentos: El objeto XMLHttpRequest y una cadena que describe el estado de la solicitud. Este es un Evento Ajax.