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

Tengo una varible Array en javascript:

var sucursales = new Array;

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

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:

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!

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