Event Loop

Apuntes de la clase:

¡es el mejor explicnado! ❤️ se me imagina que el event loop es como el burro en shrek que va preguntando si ya llegan al reino de muy muy lejano: ¿ya merito? ¿ya merito? 😄

si la vida fuera tan simple como eso,
pero obvio puede ser más complicado
te presento las promesas
by: Richard B. Kaufman López

La explicaión del profesor es asombrosa. Explicar cómo funciona el EventLoop de una forma tan sencilla es asombroso.
.
Aquí dejo un resumen de todo el funcionamiento de lo que vimos en esta clase.
.

Las funciones son empujadas al call stack cuando son invocadas y se sacan cuando devuelven un valor

.

.

setTimeOut es proveído por el navegador, la Web API se encarga del callback que le pasemos.

.

.
Cuando el timer ha terminado (1000ms en este caso), el callback se pasa al callback queue
.

.
El Event Loop mira hacia el callback queue y al call stack. Si el call stack está vacío, este empuja el primer elemento de la cola en el stack.

.

.
El callback es añadido al call stack para luego ser ejecutado. Una vez retorna un valor, este es sacado de call stack.

.

.
.
Este pequeño resumen es sacado del post de **@lydiahallie ** ✨♻️ JavaScript Visualized: Event Loop donde también se explica muy bien como funciona el Event Loop

Éste es un video de un canal de un tipo en YT.

VEÁNLO!! van a entender todo de una manera muy bien y con ésta clase del profesor Richard, queda muy bien entendido.

Genial curso

Event Loop

‌

Es lo que hace que JavaScript parezca ser multi-hilo cuando en realidad es de un solo hilo. Esto permite hacer muchas cosas a la vez. JavaScript se organiza en dos estructuras de datos:

‌

Stack: se encarga de llevar rastros de donde está el programa, lleva una lista de las funciones que se van llamando.

‌

Memory Heap: es totalmente desorganizada, se guarda información sobre variable, scope… entre otras cosas.

‌

Al stack se le llena haciendo push, se le va agregando información se arriba hacia abajo, para para poder sacar información que esté en la parte inferior primero tenemos que sacar a los bloques de información que estén arriba, a esta acción se le llama pop.

‌

Allí se guarda el registro de como funciona nuestro programa, guarda la información exacta de los scope, de los accesos de las variables, etc.

‌

Stack se ejecuta de la siguiente forma:

‌

Guarda todas las funciones o declaraciones en anonymous y luego va añadiendo las instancias y ejecuciones, luego las va quitando según vayan saliendo de su ejecución.

‌

Y así sucesivamente. Va agregando y quitando ejecuciones en el orden correspondiente.

‌

Cuando se ejecuta una función asíncrona, como por ejemplo un setTimeOut, lo reconoce pero no lo ejecuta, sigue con su proceso normal y luego aparece otra vez para ejecutar la función que instanciaría el setTimeOut.

‌

Para saber cómo funciona hay que conocer a Queue, esto es una estructura de datos en forma de fila, pero en esta estructura de datos saldrá primero lo que entró primero.

‌

Task Queue

‌

Cuando encolamos una tarea queda en las tareas scheldule, cuando el tiempo pase y se cumpla la condición o termine el proceso de espera pasa a task queue, luego se que llegue allí se topará con el event loop que mirará siempre si hay tareas pendientes en task queue, al mismo tiempo mirará el stack a ver si está vacío. Si el stack no está vacío tiene que esperar entonces que sí lo esté.

‌

Si entra más tareas agendadas al mismo tiempo bajará primero a task queue la que se cumpla más rápido, el proceso restante se hace de la misma manera.

‌

Promesas

‌

Las promesas es eso que va a pasar eventualmente, se puede rechazar o aceptar pero tardará en hacer eso.

‌

Las promesas van en otra cola, la cola microtasks queue. El event loop le da más importancia a esta fila que a la de tareas, así que primero va a ejecutar las que estén allí para luego pasar a las task queue.

no voy a bloquear el event loop! 😮
no voy a bloquear el event loop! 😮
no voy a bloquear el event loop! 😮
no voy a bloquear el event loop! 😮
no voy a bloquear el event loop! 😮
no voy a bloquear el event loop! 😮

Nunca he escrito nada en los comentarios desde que inicie mi plan Expert en Platzi, pero creo que esta clase lo amerita, es la mejor explicación que existe del Event Loop y Richard es uno de los mejores profesores de Platzi sin duda, Grande Richard.

Como dijo sacha: ‘no bloquearé el event loop’

Este curso de Javascript realmente esta 10/10 !

POR FIN, DESPUÉS DE UN MES LOGRÉ ENTENDER PROMESAS.
Gracias eternas Richard!

Ya perdí la cuenta de cuantas explicaciones del Event loop he visto, y esta es la mejor!

Wow !! porfin encontré una explicación totalmente digerible y super concisa. muchas gracias.

Brutal está explicación. Con dibujitos, cómo nos gusta a los mortales.

El Event Loop a las Promesas:

El event loop es como tu primito pequeño que detecta que tienes juegos en tu celular estará siempre preguntándote si se lo prestas xD

Philip Roberts: What the heck is the event loop anyway? - JSConf EU 2014

En el curso anterior se nos menciono el siguiente termino:
LIFO: Last In, First Out

El Stack es conocido como estructura de pila o LIFO (Last In First Out), es decir la última tarea que entra es la primera en ser atendida. Por otro lado, el Queue es una estructura de cola o FIFO (First In First Out), en ella la primera tarea que entra es la primera en ser atendida.

"no voy a bloquar el event loop " by Sacha

Genial explicación si alguien quiere ver como funciona el event loop de una manera más gráfica les dejo en el enlace: Event Loop

Pregunta. Segun entendi que las promesas se ejecutarian antes que lo demas, pero cuando ejecuto el codigo en el navegador, se ejecutan primero los consoles y despues las promesas.

Porque pasa esto:

No esta demás ver de nuevo el video Platzi comentado por Sacha Lifsky (Mayo 2019) sobre Even Loop

https://www.youtube.com/watch?v=bWvnWhVCHAc

Esto esta genial! Muy bien explicación. Nunca me imagine como sucedía esto!
Ahora entiendo porque mis programas congelaban todo!!!

Muchas gracias Richard, por darnos ejemplos tan simple.

Por fin entendí como funciona el Event Loop. Definitivamente este sí es un curso profesional.

Rayos, esto de que el Event Loop le da prioridad a las promesas es algo nuevo, no lo había visto en ningún otro lado.

Excelente clase

Excelente explicación del Event Loop la mejor hasta ahora.!

Este curso me permite ver el mundo grandioso y largo que es recorrerlo. Me encanta JS y lo estoy adoptando como mi lenguaje al cual quiero aprender a fondo.
Esta clase me encanto, ya había visto explicaciones sobre el event loop, pero esta la verdad me gusto a sobre manera.
Saludos

Excelente clase. Me ayudó a entender por fin el event loop, stack, task queue y Microtasks queue

Muy buena

mas claro no puede ser.

excelente clase

AJjajaj Ey regrese! 😄

Creo que este vídeo es bueno verlo unas varias veces. Es muy importante para entender el comportamiento de los tiempos en js… Excelente contenido!

Una buena explicación sobre el proceso
Task Queue: Es de tipo FIFO (First in, first out)

Que buena clase y que buena explicación

admito que me costo acostumbrarme a la manera en Richard explica pero esta clase es muy buena y su manera didáctica de explicar ayuda muchísimo

Y recuerden, no bloqueen el Event Loop!

Muy buena clase, una explicacion excelente! Genial Richard

Esta clase es oro puro, la mejor que he visto sobre el Event loop, el Call Stack y el Task Queue hasta el momento.
Grande Richard, que gran profesor, de los que se quedan en tu memoria para los restos. Gracias.

la didáctica de Richard es impresionante!

Las promesas que bueno es usar promesas resuelve el callback hell

Una manera de visualizar los Event Loop esta en este video instruido por el profesor Sacha Lifszyc en el Curso Fundamentos de JavaScript

Viva Platzi!

Clase magistral

Tiene una forma de enseñar muy buena, simplemente hay que estar preparados para tomar las clases, me encanto su emoción al explicar

Event Loop

Jajja lo veo en velocidad de 1.75 y me da risa como se mueve explicando el event loop jajajaj , buen curso!

son la 1 am y este modulo me pico para seguir escribiendo codigo

Team Platzi, serían tan amables de proporcionar las diapositivas empleadas en la clase.

Sasha y Richard, gracias a ustedes ahora entiendo el comportamiento de JavaScript.

Ese tablero ayuda a entender muy bien como Javascript organiza los datos en el Stack

Que buena clase, gracias.

Este vídeo es lo que me faltaba para entender a detalle el event loop, no voy a bloquear el event loop

Entonces ya sabemos porque los loops infinitos (no controlados) son una mala idea.

Acá lo podemos ver de manera gráfica

Què genial explicación! Y amé el Chale! jajaja

Pedazo de crack, nunca me había quedado tan claro!

Que chevere esta explicacion, muy didactica jejeje

Que loco, este tipo de cosas son las que me encantan entender como y por que funcionan las cosas me facina.

Para complementar este curso les recomiendo muchísimo el curso básico de algoritmos.

Un compañero de Platzi me mando el link de esta clase para entender mejor el eventLoop, excelente la explicacion, me ha quedado muy claro. Muchas gracias (:

Esa magia negra

Hermosa explicación

Es la clase de asincronismo mas maravillosa y clara que he visto desde que empece a esutudiar JS, ni en el propio curso de asincronismo este concepto se explica tan claro!

Corríjanme si me equivoco

Js es Asíncrono( digamos que si una función se ejecuta en x tiempo js ejecutara las funciones que lleven menos tiempo primero ) y es concurrente ( que es cuando dos o más tareas progresan simultáneamente como en el scheduled task).

El event loop es como un fiscal de transito o una torre de control de un aeropuerto, verifica primero si no se estan ejecutando tareas en el stack y va pasando en orden las tareas del task queue a el stack.

Pero las promesas se resuelven en un lugar aparte llamado Microtask queue y digamos que el motor de js le da prioridad.

Las promesas es algo que eventualmente sucedera.

conclusión : setTimeout no es el tiempo que va a tardar en ejecutarse sino, mas bien, el tiempo que va a tardar en pasar al Task Queue, que luego el Event Loop va analizar si el Stack esta vació, en ese caso lo ejecutara. Osea el tiempo es relativo 😛.

las diapositivas son maravillosas kjdaj entendi muy bien n.n, gran trabajo platzi!

este curso se debe ver 2 veces, ademas que sirve como repaso y afianzar conocimientos de los cursos de la ruta como: los de Js POO, asincronismo, o el de V8 navegador

Que buena analogía de los platos!

Claro y preciso

Este vídeo ilustra de forma gráfica como funcional el Event Loop.

Ha sido una ayuda visual extra a la explicación de Richard. 😃

Que curso y que clase tan fructíferas. Tenia una noción de como funciona el event loop, pero ya se me había olvidado. Ahora, además de recordarlo, me quedo mucho mas claro

El Event Loop siempre está ansioso.

Soy un event loop? jajajja

Buen video, Enseña muy bien

Aqui les comparto un aporte sobre el event loop muy completo y con unas animaciones muy buenas para las personas que aprenden visualmente.
https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf

Un buen blog donde se explica d emanera muy detallada el event loop
https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

No dudo que el profesor sea un experto, de hecho, se nota el dominio en la comprensión de los conceptos. Pero esta clase no explica de forma acertada el Event loop.

Esta el Stack vacío?

• NO
  Chale
  Jaja que divertido es cuando ya le entiendes

Es increible como funciona el eventloop!! A pesar de usarlo siempre hay pequeños detalles que se nos pasan en mi paso las microstacks. Aqui dejo el codigo por si alguien lo quiere correr y jugar.

function more() {
    console.log('start')
    setTimeout( () => console.log( 'settimeout' ) ,  0)
    Promise.resolve('promise1').then(msj => console.log(msj))
    Promise.resolve('promise2').then(msj => console.log(msj))
    console.log('end')
}```

Muy explicativa la clase, me gustó bastante, woow

Esta es la mejor explicación que he tenido acerca del event loop en todos los cursos de js que he hecho, crack !!

El event loop hace que js parezca multihilo cuando no lo es

Para entender el event loop, debemos de entender el stack, el task queue y el microtask queue.

Stack -> FILO (First in, last out)

Es una estructura de datos que especifica dónde está el programa. El programa se va a ubicar en las funciones, algunas anónimas y otras con nombre.

El stack es el que se va a encargar de ejecutar las sentencias, y las va a ejecutar, desde la última hasta la primera FILO

Se va a leer el programa de arriba para abajo, declarando las funciones que se necesiten, hasta que hayan llamadas, si se agrega una llamada, ésta se va a agregar al stack y va a ejecutar el contenido de la llamada encontrando más llamadas y agregándolas al stack, hasta que se ejecute alguna sentencia final, ésto va a quitar esa última llamada del stack, resolviendo siguientes llamadas, cuando se resuelva ese stack, seguirá leyendo de arriba a abajo de la misma forma, a excepción de que hayan llamadas asíncronas.

Cuando js recibe una llamada asíncrona la ejecutará de manera anónima y empezará un nuevo hilo como si fuera síncrona.

Task Queue (cola de tareas) -> FIFO (First in First out)

Lo primero que entra, es lo primero que sale y se manda al stack

Event loop

El event loop está entre stack y el queue, el event loop pregunta cierto tiempo si el stack queue está vacío, en caso de estarlo, jala una tarea del Queue y se la pasa al stack (FIFO) y el stack se encarga de ejecutarla (FILO).

Promesas y el microtask queue

El event loop hace lo mismo que con el task queue para las microtareas (respuestas de las promesas), pero con la diferencia de que le va a dar preferencia al microtask queue que al task queue.

El event loop pregunta cierto tiempo si el stack queue está vacío, en caso de estarlo, revisará el microtask queue, si tiene tarea la agregará al stack, si no tiene tarea irá al task queue, si tiene tarea la agregará al stack, y así lo seguirá haciendo hasta terminar las tareas.

Las promesas van en la micro task y se ejecutan primero que los setTimeout si culminan al mismo tiempo.

A mi esta página latentflip. com/loupe me sirvió muchísimo para entender este proceso, espero a alguno le sirva.

Tremendo profesor! Gracias

La mejor explicación por lejos sobre el Event Loop. Excelente

Excelente clase de Event Loop! La magia negra de javascript para correr varios procesos, en un único hilo.

Esta debió ser la primera clase de fundamentos me hubiera ahorrado muchos dolores de cabeza jaja

Mi clase favorita en lo que va de curso

Una manera en la que me quedó muy claro como funciona un stack es como si fuera una caja, donde pones objetos (imaginemos libros) y para sacar el que está hasta abajo en la caja será necesario quitar los que estan en la parte de arriba.

Muy didáctica la forma de explicar el Event Loop, es algo que a pesar de los años no se tienen en cuenta a la hora de desarrollar y es muy importante reconocer estas bases para ser mejor profesional en JavaScript.

La mejor explicación de Event Loop que existes

el event loop esta como ansioso, jejjeje bien explicado

No hay que bloquear el Event Loop!

Como el profe lo menciona, las Estructuras de Datos (EDD) es un concepto fundamental en la programación en general, son formas particulares de organizar datos para que puedan ser utilizados de manera eficiente.

Aquí se mencionaron las Pilas, que su concepto general es que lo primero que entra, es lo último en salir, como el Stack del Event Loop, en las pilas existen estos conceptos de pop y push para quitar o insertar elementos. La segunda EDD que manejamos aquí son las Colas, lo cual su concepto principal es contrario a las Pilas, lo primero que entra es lo primero que sale, como viene siendo el Task Queue.

Existen otro tipo de EDD como lo son las Listas Enlazadas y Árboles Binarios, cada uno funciona bajo propios conceptos para la búsqueda, inserción y eliminación.

Una clase increible!!!
Estuve practicando un poco para entender más el funcionamiento del Event Loop y quiero proponerles un reto. ¿Cual es el orden de salida de los siguientes mensajes?

Espero lo tomen, realmente se siente bien entender estas cosas, avanzamos como programadores.

function asyncTask(){
  console.log('Start');
  setTimeout(() => console.log('This is a setTimeout'), 0);
  setTimeout(() => {
    console.log('This is a setTimeout with a promise');
    Promise.resolve('Promise 3').then((response) => console.log(`This is a promise ${response}`));
  }, 0);
  Promise.resolve('Promise 1').then((response) => console.log(`This is a promise ${response}`));
  Promise.resolve('Promise 2').then((response) => console.log(`This is a promise ${response}`));
  console.log('End');
}

asyncTask();```

Es la segunda vez que estoy viendo este curso y ya entiendo mejor todos estos conceptos 😮 !!

Este es un ejemplo basico del javascript runtime:

Stack, Queue, Evenloop y su magia negra, promesas, async,
Vaya clase!
Muy bien manejado el tema y sobretodo claro, contundente y al punto de facilitar el entendimiento de estructuras de datos y de como JS funciona en el navegador.

Jajaja. ¿Está el Stack vacío? ¿No? ¡CHALE! Jajaja.

Si a las clases se le podría dar “Me encanta” como en Facebook, sin dudas lo haría. Muy útil

Que manera tan sencilla de explicar, me he quedado sorprendido y por supuesto, me ha quedado claro.