Comprende JS: Event Queue y la “Asincronía”.
Parte IV de la serie Comprende JS
Bienvenidos a un nuevo episodio de esta serie llamada Comprende JS, como podrán darse cuenta estamos viendo partes especificas pero muy precisas para el entendimiento de como funciona Javascript, por lo cual espero siga siendo de tu agrado y así mismo te invito a que me cuentes si tienes dudas o sugerencias, con gusto las trataremos de atender a tiempo.
Comencemos, siempre hemos escuchado de la “asincronía” en Javascript y es que la naturaleza de Javascript engine es síncrona, entonces a que se refiere la “asincronía” que tanto suena en Javascript, bueno se puede pensar en que esto va mas enfocado a lo que sucede fuera de Javascript engine, donde JS Engine interactua con otros motores, como el “Rendering” o como las peticiones HTTP Request todas dentro del Navegador o “Browser” trabajando al mismo tiempo, a eso es a lo se puede referir como “asincronía”, pero enfoquemos un poco a como trabaja por ejemplo los eventos dentro del Javascript engine.
Pensemos en que sucede cuando mandamos una petición HTTP fuera del JS Engine, de manera asíncrona, por ejemplo que se ejecute una función cuando hacemos un click en un botón, como es que funciona o maneja la asincronía dentro de JS Engine, ya que afuera en el browser están otros procesos corriendo y mirando al JS Engine, mientras este permanece corriendo su código, bien regresemos un poco.
Execution stack… lo recuerdan, bien la pila de ejecución toma parte importante en este proceso, ya que si recordamos en el execution stack, se van apilando los contextos de ejecución creados al invocar una función y cuando la función termina de ejecutarse dicho contexto, va eliminándose de la pila hasta quedar vacía cuando termina el ultimo contexto que es el global y es justo aquí, cuando la pila esta vacía de contextos de ejecución cuando JS Engine, mira por algo llamado…
Event Queue
Consideremos la siguiente imagen.
Tratando de mostrar un poco mas gráficamente lo que sucede, en la imagen de arriba tenemos la pila de ejecución llena de contextos de ejecución que aun no terminan de ejecutarse, pero cuando lo hagan cada contexto se eliminará del execution stack y finalmente dejará vacía la pila pero también vemos que a lado de la pila hay en espera otros eventos por ejecutarse que aun están esperando a que termine de vaciarse la pila de ejecución para así entonces, el JS Engine comience a ver si existe algún evento pendiente de ejecutarse en el Event Queue, de ser así entonces se empiezan a ejecutar uno por uno y al ejecutar un evento se creara en la pila de ejecución un contexto propio del “Handler” de dicho evento es decir la función que entrara como calback para dicho evento.
Es decir todo esto lo esta ejecutando uno por uno, de manera síncrona, repito los eventos en el event queue no se ejecutan hasta que la pila de ejecución haya terminado y este vacía, esto es cuando el código que esta en tu contexto global se ha terminado de ejecutar, entonces donde esta la…
Asincronía.
Entendiendo lo anterior la asincronía esta fuera del JS Engine y es justo colocando o agregando eventos al Event Queue, mientras se esta ejecutando nuestro código, esa es la parte asíncrona en este proceso.
Para terminar de comprender el tema veamos y ejecutemos el siguiente código.
Wala, todo de manera “Síncrona”.
Conclusión.
Javascript en si mismo, en su motor es síncrono, la asincronía viene fuera del JS Engine en el Browser, donde se van poniendo eventos y otros en el Event Queue de manera asíncrona mientras nuestro código esta corriendo, por lo tanto los eventos también si así es… son síncronos, vemos una asincronía cuando el Browser nos pone en distinto orden dichos eventos en el Event Queue, pero este ultimo, los ejecutara en ese orden uno por uno de manera síncrona.
