Event Loop
Clase 3 de 26 • Curso de Asincronismo con JavaScript
Contenido del curso
Dario Paladines
student•
hace 4 años
Alan Cabrera
student•
hace 4 años
Jorge Eduardo Jiménez Álvarez
student•
hace 4 años
Clase 3 de 26 • Curso de Asincronismo con JavaScript
Contenido del curso
Dario Paladines
Alan Cabrera
Jorge Eduardo Jiménez Álvarez
Matias Diaz
ALINA BONILLA PAREDES
Federico Ivan Llano
Maria Gabriela Rodriguez Cuevas
Libian María Hernández Gil
Alvaro Sanchez
Lucas Rojas
Daniela Stornelli
Magdiel Linares
Charles Castillo Rosas
Rubén Ernesto Aragón Gil
Porfirio González López
Francisco Encabo Servián
Joao Ivan Garduño Salgado
JeanPaul Erazo García
Henry Alexander Velásquez Rosas
Diego Raciel Ortega Hernandez
Paul Martin Vargas Portugal
Alvaro Eduardo Garzón Pira
JOSE FABIAN BONILLA GUZMAN
Alvaro Eduardo Garzón Pira
Brenda Estefania Garcia Garcia
Santiago Cardenas
Kevin Harold Gutierrez Ramirez
Francisco Javier Solis Martinez
Jeison Gomez
Viena Baca
Miguel Angel Perez Cardona
Porfirio González López
Gustavo Yunier Leyte-Vidal Chacón
Oscar Barajas Tavares
LUZ ADRIANA MARTINEZ RAMIREZ
Daniel Fernando Ramirez Giraldo
Ricardo Alfonso Chavez Vilcapoma
Charles Castillo Rosas
Daniel Triana
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
De las mejores explicaciones que he visto. 10/10
muchas gracias por compartir, gran complemento
Tomate el tiempo para ver esta otra clase si te quedaron dudas
Event Loop - Curso Profesional de JavaScript
Bastante buena la explicación, vale la pena pasar a verlo para entender mejor el concepto
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.
🌀 𝗖𝗹𝗮𝘀𝗲 #𝟯: 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 𝟯/𝟮𝟭 🌀 . 📌 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++:
Gracias Maria, buen aporte.
Excelente resumen!!
me sirvió muchisimo, gracias💚
Gracias lo entendi mejor con esta imagen!
Tuve que ver el video 3 veces xd
Yo 4 te gané jaja, Ah no, así no era. :(
Mejor ve el del Profe De Granada
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...
¡Las promesas son parte de las Microtasks Queue! A estas se les da la prioridad y se ejecutan primero antes de las Task Queue!
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
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.
Si tambien lo note
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.
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
el link primero creo que el curso desapareció
¡Hola th3ryo! ¿Podrías volver a validar? A mí me ingresó sin problema a los dos links:
https://www.youtube.com/watch?v=ygA5U7Wgsg8 este video es muy util para entender el call stack
Este fue el definitivo para mi, muchas gracias por compartir :)
Gracias a todos los que compartieron la clase del Profe Diego. Esta clase + la de Diego = Oro Puro!!! <3
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. 😁
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.
Muchisimas gracias, tu aporte me ha ayudado a entender muy bien este tema
Me parece que al profe le falto explicar mas con la imagen, pero bueno. Igual casi siempre toca averiguar y ver lo que pasa
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.
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) ?
Gustavo, ya mismo lo reviso
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.
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: ㅤ
Esta animación ayuda a ver cómo van interactuando las tareas en ese ciclo:
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
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.