Acceso asincrono a Variables

[AlbertoBSD]

Hola que tal estoy programando una pequeña interfaz y me encuentro con el siguiente problema:

Tengo una varible Array en javascript:

Código (javascript) [Seleccionar] Expandir

var sucursales = new Array;

Dicha variable se actualiza en tiempo de ejecución mediante la siguiente función:

Código (javascript) [Seleccionar] Expandir

function lista_sucursal() {
$.ajax({
url: '/get_sucursales.aspx',
type: 'POST',
success: function(data) {
var r = JSON.parse(data);
if(r.ok == true) {
var i = 0;
while (i < r.data.length) {
    sucursales[r.data[i].id] = r.data[i].nombre;
    //Mas codigo irrelevante aqui
i++;
}
}
else {
//Error aqui
}
}
});
}

Dicha funcion se llama al momento de cargar la pagina primero que otras funciones...

Posteriormente tengo otro parte del codigo que hace mas o menos esto:

Código (javascript) [Seleccionar] Expandir

function maquinas_sucursales_tabla() {
$("#tabla_body").html("");
$.ajax({
url: '/get_maquinas_sucursales.aspx',
type: 'POST',
success: function(data) {
var r = JSON.parse(data);
if(r.ok == true) {
var i = 0;
while(i < r.data.length) {
    $("#tabla_body").append('<tr><td>' + sucursales[r.data[i].sucursal] + '</td></tr>');
i++;
}
}
else {
//ERROR
}
}
});
}

El detalle esta en que hay veces que pone el dato correctamente y otras veces aparece "undefined" y esto es debido a que el codigo del jquery se ejecuta de forma asincrona...

Que recomiendan para solucionar esto, estaba pensando en usar un semaforo como "sucursales_ready" para solo cargar los otros datos cuando la variable ya este lista....

Pero no se, tal vez existe otro metodo mas rapido y/o sencillo.


Saludos!

[ivancea96]

Puedes guardar los datos recibidos en cada ajax:
Cuando cada uno de ellos termine, los almacenas en la variable que sea.
Cuando lo almacenes, miras si el otro ha terminado también. Si lo ha hecho, pues haces lo que sea.

Otraopción que tienes, es hacer el segundo ajax cuando acabe el primero, con los problemas que eelo conlleva.

[[u]nsigned]

Hola!!! Para estos casos tenes dos alternativas. La primera es llamar a la segunda funcion como callback de la primera, asi te aseguras que se ejecuten una después de otra. Ora forma as profesional de hacer esto es mediante promise (promesas).

Dberias usar $.when() y dentrod e ella llamar a tus funciones asincronas. Otra ventaja de usar promesas en lugar de closures o callbacks es que el flujo de trabajo no se pausa mientras se espera la respuesta a una peticion AJAX.

https://api.jquery.com/jquery.when/
http://rlbisbe.net/2015/04/26/explicando-promises-de-javascript-con-un-ejemplo-simple/

De esta forma se hace en AnguarJS y la verdad es muy superior. Te acostumbras a el y luego jquery te parece algo primitivo en lo que a peticiones XHR se refiere xD

[AlbertoBSD]

Muy buen dia, gracias por las respuestas voy a leer los links que pusieron y los conceptos que mencionan para aprender mas ya que aunque se me da la programación, no tengo tanta experiencia en nivel web.

Cualquier duda que tenga la pondré por aquí.

Saludos!