TypeScript / Callbacks

Bienvenidos sean a este post, hoy veremos una funcion muy particular.

Este es un mecanismo estandar para registrar una funcion que ejecutaremos despues de un evento asincronico. Comencemos analizando el siguiente codigo:

function respuestaDemorada(callback: () => void) {
        function demorador() {
                console.log("5. demorador");
                callback();
        }
        console.log("2. llamando setTimeout");
        setTimeout(demorador,1000);
        console.log("3. despues del setTimeout");
}

function demorayespera() {
        function despues() {
                console.log("6. despues()");
        }
        console.log("1. llamando demorayesppera");
        respuestaDemorada(despues);
        console.log("2. despues de llamar respuestaDemorada");
}

demorayespera();

Analicemos la primera funcion donde recibiremos una funcion como argumento y la denominamos como callback. Esta funcion la declaramos para que devuelva un tipo void en este caso y no nos complique el codigo. Luego definimos otra funcion que sera el demorador y en esta mostraremos el mensaje en pantalla y llamaremos a la funcion que recibimos. Lo siguiente sera mostrar un mensaje donde notificaremos que llamaremos a un setTimeout, para luego llamarlo y pasaremos la funcion anterior y finalmente mostrar el mensaje que salimos del timeout.

Luego tenemos otra funcion que sera nuestra principal. En esta definimos una funcion que solo mostrara un mensaje. Lo siguiente sera mostrar un mensaje que identificaremos que se llamo a esta funcion. Despues de esto llamaremos a la funcion anterior y le pasaremos la funcion que definimos en esta y por ultimo mostramos un mensaje de que llamamos a esta funcion. Finalmentte llamamos a esta ultima funcion para ejecutar todo lo anterior. Compilemos y veamos la salida:

Si obsevaron en el codigo por cada mensaje enviado a la consola le pusimos un numero para indicar su orden de aparcion. En el codigo no llevan el mismo orden con el que deberian aparecer. En el video pueden ver como nos indica que llamamos a la funcion primero, luego tenemos el llamado y la respuesta de salida de timeout. Luego viene la magia porque cuando nos avisa de llamar a respuestaDemorada recien ahi tenemos la demora. Si observan llamamos a esta despues como argumento pero el setTimeout de llamada al demorador y este es el que ejecuta a despues (nuestra funcion de callback) para finalmente mostrar que se ejecuto.

Todo esto que vimos representa de una forma muy basica lo que se llama asincronismo. Si bien podemos considerar que tenemos dos funciones de callback (despues y demorador) en este codigo, solo uno sera asincronico. En este caso es demorador porque es aplicado mediante el setTimeout para la demora. Y como despues es llamado desde demorador son los unicos que no se ejecutan automaticamente como se ve en el video. Es decir que ambas funciones son agregadas a una cola (queue) para que en algun momento javascript las invoque.

Esto es una forma muy basica de verificar el asincronismo. En general todo codigo de javascript se lo considera sincronico, es decir a medida que lee las lineas lo ejecuta, pero cuando encuentra un codigo, bloque o funcion asincronica este lo aparta y lo procesa en paralelo para en algun punto del codigo ejecutarlo. Esto se creo principalmente para solventar problemas cuando se necesita manipular informacion desde el servidor porque las conexiones no siempre son fiables por lo tanto no siempre obtendremos la informacion. Asi como tampoco es inmediata por lo cual debemos tener la posibilidad de poder generar una demora para posibilitar la recepcion de la informacion asi como tambien trabajar en un segundo plano mientras no este disponible. En este caso no es muy evidente pero en los proximos temas si se notara que estan mas orientados a todo esto.

En resumen, hoy hemos visto callback, que es, para que sirve, como se utiliza, una pequeña vista a lo que es asincronismo, como esto soluciono el problema de manipular informacion mediante javascript, y en los proximos posts nos adentraremos en este tema, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.