Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Event Loop

15/42
Recursos

El Event Loop hace que Javascript parezca ser multihilo a pesar de que corre en un solo proceso.

Javascript se organiza usando las siguientes estructuras de datos:

  • Stack. Va apilando de forma organizada las diferentes instrucciones que se llaman. Lleva as铆 un rastro de d贸nde est谩 el programa, en que punto de ejecuci贸n nos encontramos.
  • Memory Heap. De forma desorganizada se guarda informaci贸n de las variables y del scope.
  • Schedule Tasks. Aqu铆 se agregan a la cola, las tareas programadas para su ejecuci贸n.
  • Task Queue. Aqu铆 se agregan las tares que ya est谩n listas para pasar al stack y ser ejecutadas. El stack debe estar vac铆o para que esto suceda.
  • MicroTask Queue. Aqu铆 se agregan las promesas. Esta Queue es la que tiene mayor prioridad.

El Event Loop es un loop que est谩 ejecutando todo el tiempo y pasa peri贸dicamente revisando las queues y el stack moviendo tareas entre estas dos estructuras.

Aportes 305

Preguntas 12

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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: 鈥榥o 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

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.

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 鈥淢e 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.