A lo que te refieres en la parte final es a objetos diferidos y promesas. Con ellas puedes realizar acciones luego de haberse completado otras.
Para tu caso, como además veo que repites código en el cual solo varían un par de líneas, te conviene utilizar una función recursiva, la cual se llamará a sí misma (por eso es recursiva) cuando se haya terminado la petición asíncrona actual.
Código Javascript
:
Ver originalfunction ajax(calls){
$.when($.ajax(calls[0].properties)).then(function(res){
calls[0].callback(res);
calls.splice(0, 1);
if (calls.length) ajax(calls);
});
}
ajax([
{
properties: {
url: "destino1.php",
type: "post",
data: {
variable: 1
}
},
callback: function(r){
//Instrucciones
}
},
{
properties: {
url: "destino2.php",
type: "get",
data: {
variable: 2
}
},
callback: function(r){
//Instrucciones
}
},
{
properties: {
url: "destino3.php",
type: "post",
data: {
variable: 3
}
},
callback: function(r){
//Instrucciones
}
}
]);
La función recibe un array de objetos. Cada objeto posee un atributo y un método. El atributo posee un objeto literal en el cual se definen el destino hacia el cual se enviará la información, el método de envío y los datos a enviar. El método no es otra cosa que una llamada de retorno para hacer algo con la respuesta recibida.
En la función, utilizamos el método
$.when()
mediante el cual ejecutaremos una función cuando se haya completado la petición asíncrona pasada como argumento. Como puedes ver, tomo al primer elemento de
calls
, el cual es el array que recibió la función como argumento, y le paso al método
$.ajax()
, el conjunto de propiedades establecidas en
properties
. Una vez completada la petición asíncrona, ejecuto la llamada de retorno correspondiente al primer elemento del array
calls
, pasándole la respuesta de la petición asíncrona como argumento. Enseguida,
elimino al primer elemento del array
calls
y verifico si este aún posee elementos; de ser así, invoco a la misma función
ajax()
pasándole como argumento al array
calls
pero ya actualizado, es decir, sin el primer elemento, quedando el segundo en la primera posición, el tercero en la segunda y así sucesivamente.
Si quisieras que transcurra un determinado tiempo entre cada ejecución, puedes utilizar un
temporizador:
Código Javascript
:
Ver originalif (calls.length){
setTimeout(function(){
ajax(calls);
}, 1000);
}
En el ejemplo, las llamadas se ejecutarán de manera sucesiva luego de transcurrido un segundo entre el término de la ejecución de una de ellas y el inicio de la siguiente.
Aunque veo que utilizas el mismo destino y método de envío para todas las peticiones asíncronas, la forma que te propongo te puede servir para casos en los que dichos datos varíen, como en el ejemplo.
Un saludo