Event Loop

Clase 3 de 26 • Curso de Asincronismo con JavaScript

Dario Paladines

student•

La explicación de Diego de Granda es simplemente espectacular para entender el asincronismo y el event loop Lo explica haciendo analogía con una taqueria :) Clase de Diego

Alan Cabrera

student•

De las mejores explicaciones que he visto. 10/10

Jorge Eduardo Jiménez Álvarez

student•

muchas gracias por compartir, gran complemento

Matias Diaz

student•

Tomate el tiempo para ver esta otra clase si te quedaron dudas

Event Loop - Curso Profesional de JavaScript

ALINA BONILLA PAREDES

student•

Bastante buena la explicación, vale la pena pasar a verlo para entender mejor el concepto

Federico Ivan Llano

student•

Vi el video de Richard y dice que los task queue son FIFO (first-in first-out ) 5:30 y en el video de Oscar 3:00 es LIFO al igual que el call stack. Creo que el correcto seria el de Richard.

Maria Gabriela Rodriguez Cuevas

student•

🌀 𝗖𝗹𝗮𝘀𝗲 #𝟯: 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 𝟯/𝟮𝟭 🌀 . 📌 Para entender el ++Event Loop++, en el siguiente GIF (fuente: aquí) se muestra que la primera tarea asignada (mostrar por Consola la palabra: "start") pasa por el Call Stack luego se imprime en consola. Cuando el Call Stack tiene el "setTimeout" se debe esperar un periodo de tiempo en este caso 5 segundos para imprimir el mensaje: "Callback Function", ahí es cuando vemos en Web APIs ++el timer++. Mientras tanto, el código sigue corriendo a la siguiente tarea para imprimir en consola la palabra: "end". . El Event Loop es la tarea asignada (en este ejemplo el "callbackFn()") para mover del Task Queue al Stack, ++solo si el stack está vacío++:

. . 🗄️ ++Javascript se organiza usando las siguientes estructuras de datos:++ . • 🗃️ Memory Heap: Región de memoria libre de gran tamaño, dedicada al alojamiento dinámico de objetos (asignado a un montículo). Es compartida por todo el programa y controlada por un recolector de basura que se encarga de liberar aquello que no se necesita, es decir de forma desorganizada se guarda información de las variables y del scope. • 🔋 Call Stack (pila LIFO: Last-in, First-out): Apila de forma organizada las instrucciones de nuestro programa. La pila de llamadas, se encarga de albergar las instrucciones que deben ejecutarse. Nos indica en que punto del programa estamos, por donde vamos. • 🚗🚕🚙 Task Queue (cola): Cada vez que nuestro programa recibe una notificación del exterior o de otro contexto distinto al de la aplicación, el mensaje se inserta en una cola de mensajes pendientes y se registra su callback correspondiente. El stack debe estar vacío para que esto suceda. • 🚗🚕 Micro Task Queue: Aquí se agregan las promesas. Esta Queue es la que tiene mayor prioridad.

Libian María Hernández Gil

student•

Gracias Maria, buen aporte.

Alvaro Sanchez

student•

Excelente resumen!!

Lucas Rojas

student•

Daniela Stornelli

student•

me sirvió muchisimo, gracias💚

Magdiel Linares

student•

Gracias lo entendi mejor con esta imagen!

Charles Duck Castillo Rosas

student•

Tuve que ver el video 3 veces xd

Rubén Ernesto Aragón Gil

student•

Yo 4 te gané jaja, Ah no, así no era. :(

Porfirio González López

student•

Mejor ve el del Profe De Granada

Francisco Encabo Servián

student•

Es buenísima la herramienta para ver el Event Loop, esto es algo que echaba mucho de menos en algunos cursos. Elementos visuales más interactivos. Al final la programación se aprende programando, tocando, errando...

Joao Ivan Garduño Salgado

student•

¡Las promesas son parte de las Microtasks Queue! A estas se les da la prioridad y se ejecutan primero antes de las Task Queue!

JeanPaul Erazo García

student•

Creo que hay un error en la parte del Task Queue, este no opera bajo el concepto de LIFO(Last-In, First-out) si no de FIFO(FIrst-In, FIrst-Out) ya que al tratarse de una cola, se le dara prioridad a las tareas que llegaron primero, se puede complementar mas viendo el video del curso profesional de javascript

Henry Alexander Velásquez Rosas

student•

Es verdad, incluso en el video que tiene Oscar Barajas en YouTube tiene el mismo error. Justo en los comentarios menciona que se le pasó ese error.

Call stack si funciona como LIFO.

Diego Raciel Ortega Hernandez

student•

Si tambien lo note

Paul Martin Vargas Portugal

student•

Event Loop: el buble de eventos de un patró de diseño que espera y distribuye eventos o mensajes de un programa.

Memory Heap: Los objetos son asignados a un montículo (espacio grante en la memoria no organizado).

Call Stack (pila): Aplila de forma organizada las instrucciones de nuestro programa .

Task Queue: Cola de tareas, que se maneja la concurrencia, se agregan las tareas que ua estan listas para pasar al Stack (Pila). El stack debe de estar vacio.

MicroTask Queue: Las promesas tienen otra forma de ejecutarse y de una prioridad superior.

Wev APIs: JavaScript del lado del cliente: setTimeout XMLHttpRequest, File Reader, Dom. Node: fs, https.

Event Loop: Tarea asignada para mover el Task Queue al Stack, solo si el Stack está vacío.

Alvaro Eduardo Garzón Pira

student•

Hola tú, si en esta clase sentiste que el profesor habla en chino, haz el siguiente curso: https://platzi.com/cursos/javascript-navegador/ Es corto y te dará tal como a mí, lo necesario para comprender lo que habla el profesor, también, el profesor Oscar te reforzará conocimientos o temas que no se tocaron o no se profundizaron en el curso de JS Engine V8.

P.D.: Si ya lo hiciste y sigues sin entender, ¡Vuelve a hacerlo!

P.D.: También si algo no te queda claro, te recomiendo esta clase también del profesor Oscar Barajas: https://www.youtube.com/watch?v=7GeDNQRQy0Y

JOSE FABIAN BONILLA GUZMAN

student•

el link primero creo que el curso desapareció

Alvaro Eduardo Garzón Pira

student•

¡Hola th3ryo! ¿Podrías volver a validar? A mí me ingresó sin problema a los dos links:

Brenda Estefania Garcia Garcia

student•

https://www.youtube.com/watch?v=ygA5U7Wgsg8 este video es muy util para entender el call stack

Santiago Cardenas

student•

Este fue el definitivo para mi, muchas gracias por compartir :)

Kevin Harold Gutierrez Ramirez

student•

Gracias a todos los que compartieron la clase del Profe Diego. Esta clase + la de Diego = Oro Puro!!! <3

Francisco Javier Solis Martinez

student•

Cada uno de estos elementos que el profesor explico son pequeños contenedores 📦 que se encuentran dentro de un gran contenedor🍱 llamado el JS Runtime, si quieren saber más de ello y del JS Engine recomiendo el curso de JS Engine V8 y el navegador. 😁

Jeison Gomez

student•

Hola compañeros :) Los invito a darle un vistazo a esta Lectura, me hizo muy fácil la compresión de este tema. Espero les sea útil.

Viena Baca

student•

Muchisimas gracias, tu aporte me ha ayudado a entender muy bien este tema

Miguel Angel Perez Cardona

student•

Me parece que al profe le falto explicar mas con la imagen, pero bueno. Igual casi siempre toca averiguar y ver lo que pasa

Porfirio González López

student•

Por qué describen a TASK QUEUE, pero en la imagen se llama Callback Queue?

No pudieron decir que era lo mismo, tuve que andar de allá para aquí para notar eso.

Gustavo Yunier Leyte-Vidal Chacón

student•

En el minuto 3 sobre la cola de tareas (task queue), la estructura de datos cola no debería ser FIFO (First In, First Out) ?

Oscar Barajas Tavares

Team Platzi•

Gustavo, ya mismo lo reviso

LUZ ADRIANA MARTINEZ RAMIREZ

student•

Si lo piensas, si tuvieses una funcion que te entrega un dato u objeto parseado o lo que quieras, no puedes resolver primero la ultima, pues el dato de la ultima te lo entrega la primera funcion, eso es un ejemplo.

Daniel Fernando Ramirez Giraldo

student•

La explicación de la clase es un poquito abstracta por tantos elementos sueltos interactuando entre sí, pero para sintetizar, este es el ciclo que se cumple: ㅤ

Las funciones y variables se guardan en el Memory Heap.
Cada instrucción o tarea que programamos en JavaScript se va apilando en el Call Stack en espera de ser ejecutadas.
El motor de JavaScript va sacando una a una las tareas de la parte superior de la pila del Call Stack (que es de tipo LIFO) para procesarlas.
Si el motor de JavaScript se encuentra en la pila del Call Stack una tarea asincrónica (como un setTimeOut, por ejemplo), dice: "esto no es tarea mía" y se lo pasa al navegador para que procese esa tarea por su lado, ya sea al MicroTasks Queue (para filtrar las Promises) o a las Web APIs (funciones propias del navegador).
El Call Stack sigue procesando el resto de tareas una a una, mientras el navegador procesa las tareas asincrónicas que se le pasaron. Una vez el navegador las completa, las pasa al Callback Queue (fila tipo FIFO) para indicar que ya están realizadas.
El Event Loop vigila permanentemente el Call Stack del lado de JavaScript, y una vez lo ve vacío, traslada una a una las tareas completadas que hay en el Callback Queue del lado del navegador hacia el Call Stack para que ahora sí, sean procesadas sincrónicamente por JavaScript. ㅤ

Esta animación ayuda a ver cómo van interactuando las tareas en ese ciclo:

ㅤ Así como lo recomendaron varios, recomiendo mucho ver la clase sobre qué es la asincronía en JavaScript del profesor Diego de Granda. Ayudará muchísimo a entender este concepto.

Ricardo Alfonso Chavez Vilcapoma

student•

Sólo objetos y arrays se guardan en el grado, el resto en el callstack. Revisa el curso de POO básico, el profe JuanDC lo explica

Charles Duck Castillo Rosas

student•

Daniel Triana

student•

Honestamente siento que el problema de Oscar es el no saber diseccionar los temas en partes mas pequeñas y digeribles, el intentar explicar el Callstack en 15s, simplemente no es suficiente, y es fundamental para entender el Eventloop. Como Oscar ya lo entiende, tiene una idea general, por lo que al resumirlo todo en una sentencia se puede tener una idea clara, pero para el que YA SABE, para alguien nuevo solo le genera mas confusión. Por eso no es de extrañar que en los comentarios de esta clase hallan links a otras clases y recursos externos. . Aqui les dejo un link de una Playlist genial que explica todo los conceptos fundamentales de JavaScript para entender el asincronismo. Va mas a fondo que en el curso de Diego de Granda, e incluso me parece que explica de una mejor manera.