Como funciona la asincronía en Javascript

Ejemplo de síncrono y asíncrono

Cuando comenzamos a aprender JavaScript, muchas veces nos resulta complejo entender el concepto de Asincronía. Pues bien, un código síncrono es como la fila que se forma al comprar el pan en la tienda de tu barrio, nos ponemos uno detrás de otro y nos atienden según vamos llegando. El concepto de asíncrono podría parecerse más a un gran supermercado en el que existe una fila única inicial, que se divide en varias filas para el pago cuando una caja queda libre, los compradores salen del supermercado no en orden en que entraron en la fila, sino salen en función del tiempo que han tardado en pagar la compra.

Asincronía, mas simple de lo que parece

Para poder entender este concepto, JavaScript incorpora tres partes:

Call Stack

La pila pila de llamadas (Call Stack en inglés) es una estructura tipo LIFO (Último en entrar, Primero en Salir) en que la van entrando funciones y se va ejecutando.

Web Api

Pero claro, que ocurre si en el Call Stack entra un evento onClick y no se ejecuta nunca, al no hacer clic sobre dicho elemento, o un setTimeout de 100000 segundos o una llamada a una Api que tarda mucho, ¿se para el programa?. No, esta es la verdadera magia de JavaScript, estas funciones (timers de JavaScript, eventos generados por clics, o HTTP request) las gestiona el Web Api, siguiendo la pila de llamadas con la siguiente instrucciones.

Callback Queue

Que pasa cuando se da el clic del evento, acaba el setInterval o responde el servidor a una petición HTTP, pues en ese momento la función o respuesta de estos eventos se pasa a la cola de tareas (Queue) a la espera de entrar en la pila de llamadas. Esta cola es una estructura FIFO (Primero en entrar, primero en salir) y es el Event Loop el que se encarga de ir añadiéndola al Call Stack para su ejecución.

Resumiendo

En resumen, las funciones entran en el Call Stack, y se ejecutan, si una de ellas espera un evento, por ejemplo un clic, la pasamos a Web Api para no parar el Call Stack y cuando tenemos la respuesta se pasa al Callback Queue, que la insertará en el Call Stack para que se ejecute dicha respuesta.

Para entenderlo mejor podemos utilizar la herramienta web loupe que nos muestra como se van ejecutando las ordenes en JavaScript. Nos permite pausar la ejecución, cambiar los tiempos para que la ejecución sea mas lenta y podamos seguir paso a paso lo que ocurre.

Ideone, un compilador online

En ElLisensiado siempre nos ha gustado mostrar sitios online para realizar tareas, que nos puedan sacar de más de un apuro o facilitarnos la vida en algún aspecto. El sitio que os presento hoy cumple perfectamente con esas características.

Ideone es una página Web que nos va a permitir compilar, depurar y ejecutar código en línea de más de 40 lenguajes de programación, entre ellos C,C#,Java,JavaScript,Objetive-C,Perl,PHP,SQl,VB.NET…. La interfaz es bastante sencilla e intuitiva, y aunque no es un IDE completo de desarrollo, si vamos a poder probar nuestros códigos de manera rápida, viendo los resultados.

Notepad++, un editor de texto sencillo y completo

Notepad++ es un editor gratuito de código fuente, que soporta varios lenguajes de programación y se ejecuta en MS Windows.

Realmente es un editor de texto muy sencillo, pero que cuenta con algunas ventajas, con respecto a los editores tradicionales. Varias de ellas son:

• Se distribuye bajo la licencia General GNU.
• Permite trabajar con multiples lenguajes (coloreando la sintaxis), como son C, XML, HTML, PYTHON, SQL … y otros muchos más.
• WYSIWYG
• Multi-Documento y Multivista.
• Deteción automática del estado del documento
• Grabación y reproducción de macros
• Ejecución directa en navegador
• Soporte multitud de idiomas

Link de descarga http://notepad-plus.sourceforge.net/es/site.htm