Usando CallBacks (JavaScript)

Digamos que, desde JavaScript, leímos una información en mi Base de Datos. Dicha información toma tiempo en llegar. Luego de leer la info, llamamos a una función para que haga otra cosa. En teoría, la función que llamamos debería correr una vez que termine la primera actividad, y por lo tanto, esperando a que termine.

En JavaScript esto no es así. Una de las ventajas/desventajas de JavaScript es la “Asincronía”.

Mi código originalmente era así:

var id_alergia = listado_alergias.ID[listado_alergias.Nombre.indexOf($("#txt_nombre_alergia").val())];

Lo único que hace es buscar en un array un número, dependiendo de la posición de un valor en otro array.

if(id_alergia == undefined){
    //ALERGIA NO EXISTE, CREAR
    sendAviso('Creando nueva Alergia...');
    $.post("Controller/Router.php",
        {Method: "POST", Target: "ALERGIA", Nombre: $("#txt_nombre_alergia").val()},
        function(data){
            id_alergia = data;
            sendAviso(' Alergia creada con ID: ' + id_alergia);
        }
    );
}

Aquí lo que hacemos depende de si encontramos el número en el primer array. Si no, quiere decir que la alergia(en este caso) no existe y tengo que crearla para luego relacionarla con una persona.

Una vez que la tengo lista, la relaciono con la persona que tiene dicha alergia.

$.post("Controller/Router.php",
    {
        Method: "POST",
        Target: "ALERGIAS_PACIENTE",
        IdAlergia: id_alergia,
        RutUsuario: $("#txt_rut").val().replace("-", "")
    },
    function(data){
        sendAviso(data);
    }
);

En teoría, esto debería seguir su curso normal … pero, al ejecutarlo, me daba un error en SQL, diciendo que el campo “IdAlergia” no existía (en $_POST[“IdAlergia”]) . Se suponía que primero había revisado que si, efectivamente no existía, lo guardaba y obtenía el id.

En este punto la asincronía de JavaScript hacía de las suyas. Como la primera función tomaba un tiempo en funcionar (mínimo, por cierto), la segunda se ejecutaba sin esperar el término de la primera, y por ende la variable id_alergia seguía siendo undefined.

Buscando cómo solucionar este problema, llegué a las funciones callback.

En JavaScript, las funciones son objetos del tipo function. Al ser objetos, podemos enviarlas como parámetro para otra función, para ejecutarlas dentro de otra función.

Entonces, usando el “success” de ajax + un callback quedamos con:

var id_alergia = listado_alergias.ID[listado_alergias.Nombre.indexOf($("#txt_nombre_alergia").val())];
function guardarAlergias(callBack){

    if(id_alergia == undefined){
    //ALERGIA NO EXISTE, CREAR
        sendAviso('Creando nueva Alergia...');
        $.post("Controller/Router.php",
            {Method: "POST", Target: "ALERGIA", Nombre: $("#txt_nombre_alergia").val()},
            function(data){
                id_alergia = data;
            }
        ).success(function(){
            sendAviso(' Alergia creada con ID: ' + id_alergia);
            if (callBack && typeof(callBack) === "function") {
                callBack(id_alergia);
            }
        });
    }
}

guardarAlergias(function(id){
    $.post("Controller/Router.php",
        {
            Method: "POST",
            Target: "ALERGIAS_PACIENTE",
            IdAlergia: id,
            RutUsuario: $("#txt_rut").val().replace("-", "")
        },
        function(data){
            sendAviso(data);
        }
    )
});

De esta manera, ejecutamos desde el success (que de hecho, es un callback) y llamamos a nuestra función🙂 en orden. se corrigen los errores de “orden” y todo ok😯

Acerca de MaritoCares

Ingeniero Informático. Con tendencias a la programación en [C#, VB].NET, Java(Web principalmente...), PHP, JavaScript, algo mínimo de [ruby, python], y el clásico C.
Esta entrada fue publicada en JavaScript, Tutoriales. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s