No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Event Loop

3/26
Recursos

Aportes 93

Preguntas 12

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

Apoyo visual (Recurso tomado de un compa帽ero)

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

Event Loop - Curso Profesional de JavaScript

馃寑 饾棖饾椆饾棶饾榾饾棽 #饾煰: 饾棙饾槂饾棽饾椈饾榿 饾棢饾椉饾椉饾椊 饾煰/饾煯饾煭 馃寑
.
馃搶 Para entender el Event Loop, en el siguiente GIF (fuente: aqu铆) se muestra que la primera tarea asignada (mostrar por Consola la palabra: 鈥渟tart鈥) pasa por el Call Stack luego se imprime en consola. Cuando el Call Stack tiene el 鈥渟etTimeout鈥 se debe esperar un periodo de tiempo en este caso 5 segundos para imprimir el mensaje: 鈥淐allback 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: 鈥渆nd鈥.
.
El Event Loop es la tarea asignada (en este ejemplo el 鈥渃allbackFn()鈥) 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.

Tuve que ver el video 3 veces xd

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鈥

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

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

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

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

Gracias a todos los que compartieron la clase del Profe Diego. Esta clase + la de Diego = Oro Puro!!!
鉂わ笍

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.

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

La manera en que explica es excelente.

Asynchronous = Hay funciones que ejecuta el navegador web y no JS, por ejemplo TimeOut por lo tanto pueden ejecutarse paralelamente y terminar m谩s r谩pido gracias a la divisi贸n de tareas
Memory Heap = Espacio donde est谩n las funciones y variables sin un orden en particular
Call Stack = Espacio donde se ordenan las funciones seg煤n se vayan llamando
Web Apis = Son las funciones que ejecuta el navegador, podemos obtener el listado completo escribiendo 鈥渢his鈥 en la consola del navegador
Callback queue = Las tareas que ya termin贸 el navegador se van a una cola, en espera de que JS termine sus tareas para entregar las funciones ya finalizadas
Event Loop = Es el observador que verifica si JS ya termin贸 sus tareas para pasar las funciones del Callback queue al Call stack

Si entend铆 bien?

Loupe is 馃サ 馃サ 馃サ

Tuve que detenerme un rato para entender el concepto, pero esto fue lo que entend铆:

  • El Memory Heap es un lugar donde se almacenan datos. Es como un estante en el que se pueden poner cosas para usar m谩s tarde.
  • El Call Stack es como un registro de las tareas que est谩 haciendo el programa. Es como un mont贸n de notas en las que se escribe lo que se est谩 haciendo en cada momento.
  • Las Web APIs son herramientas que ofrece el navegador para hacer cosas como enviar solicitudes a un servidor.
  • Y el Callback Queue es como una lista de tareas que se deben hacer despu茅s de que se complete una tarea anterior.
  • El Event Loop es como un guardi谩n que verifica constantemente si hay tareas pendientes en la Callback Queue.

Si hay una tarea pendiente, el Event Loop la agrega al Call Stack para que el programa la ejecute. Cuando la tarea se completa, el Event Loop la elimina del Call Stack y verifica la Callback Queue para ver si hay m谩s tareas pendientes.

Ejemplo: si un usuario hace clic en un bot贸n para ver una imagen, el programa usar谩 una Web API para solicitar la imagen al servidor. Mientras espera la respuesta del servidor, el programa puede seguir ejecutando otras tareas. Cuando llega la imagen, la Web API agrega una tarea al Callback Queue, que luego es recogida por el Event Loop y agregada al Call Stack para mostrar la imagen.

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:

  1. Las funciones y variables se guardan en el Memory Heap.
  2. Cada instrucci贸n o tarea que programamos en JavaScript se va apilando en el Call Stack en espera de ser ejecutadas.
  3. 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.
  4. Si el motor de JavaScript se encuentra en la pila del Call Stack una tarea asincr贸nica (como un setTimeOut, por ejemplo), dice: 鈥渆sto 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).
  5. 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.
  6. 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.

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.

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

Estos elementos se guardan en memoria y pueden ser usados o tal vez no, no se sabe.

Resaltar que las variables y sus valores se guardan en la memoria CallStack, pero los array y objetos se guardan en la memoria HEAP y su referencia o POINTER en el CALLSTACK.

Miren esta clase: https://platzi.com/clases/2419-javascript-poo-intermedio/39811-como-funciona-la-memoria-en-javascript/

les recomiendo la conferencia de Philip Robert de la JS conf sobre este tema demasiado explica el event loop de manera bastante clara, simple y graciosa

Muy pobre la explicaci贸n de esta clase.

3/26 Event Loop
El event loop en JavaScript es un mecanismoque maneja la forma en que el navegador o el motor de JavaScriot maneja las tareas asincr贸nicas en segundo plano y asegura que el c贸digo se ejecute en orden y sin bloquear la interfaz de usuario.

Memory Heap: Es el espacio en memoria donde se asignan y almacenan los objetos y variables creados en tiempo de ejecuci贸n.
Call Stack: Es una estructura de datos que registra la invocaci贸n de funciones en tiempo de ejecuci贸n y gestiona el orden en que se ejecutan esas funciones.

Task queue: Es una cola donde se agregan las tareas asincr贸nicas que est谩n listas para ser procesadas por el event loop. Las tareas en la cola se ejecutan en orden FIFO ( primero en entrar, primero en salir) despu茅s de que se complete la tarea actual en la call stack.

Web APIs: Son conjuntos de funciones y m茅todos predefinidos que proporciona el navegador o el entorno de ejecuci贸n de JavaScript, para interactuar con diferentes caracter铆sticas y servicios web, como la manipulaci贸n del DOM, la geolocalizaci贸n, la gesti贸n de redes, entre otros.

Sobre este video debo comentar que si no les queda claro es normal, no es culpa ni del docente ni del alumno.
Me explico, los conceptos mencionados suelen ser abordados por otros profesores en varios videos incluso bloques enteros. En este curso solo se explica en un video, pues el curso se centra en las formas de usar el asincronismo en JS, los elementos involucrados solo se explican para dar contexto.
En caso esten interesados en el funcionamiento del navegador y sus elementos ( meory heap, call stack, event loop, etc.) recomiendo llevar el curso de js engine y navegador y el curso de JS profesional donde los profesores abordan estos temas con suficientes videos. Un gusto camaradas.

隆Hola! Comparto por este medio mis anotaciones sobre este tema que se que puede llegar a ser un poco confuso.

https://juanosuna.notion.site/Que-es-el-Event-Loop-40d928e2560c4bb49564b3308865cae6

(cualquier FeedBack es apreciado)

Saludos!

esta clase vale oro que genial

Ver el video del recurso de la clase, fue genial. Puedo decir que tengo la idea mucho m谩s clara, pero hay que seguir practicando.

Creo que esto est谩 mal escrito
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202023-11-21%20133001-fa8e10e6-1dd0-4cea-847d-737fe8a518fd.jpg)![](https://static.platzi.com/media/user_upload/image-4c135e20-8af3-4dbe-80c1-803f18dcfd19.jpg)

Event Loop en JavaScript

El 鈥淓vent Loop鈥 es un concepto fundamental en la programaci贸n as铆ncrona en JavaScript, y es lo que permite que JavaScript maneje tareas as铆ncronas de manera eficiente sin bloquear la ejecuci贸n del programa. Esto es especialmente importante en entornos como navegadores web, donde muchas operaciones, como solicitudes de red y manipulaci贸n de elementos de la interfaz de usuario, deben realizarse de manera as铆ncrona para no afectar la capacidad de respuesta de la p谩gina.

El Event Loop es esencialmente un ciclo continuo que se encarga de monitorear la pila de llamadas (call stack) y la cola de tareas (task queue). Veamos c贸mo funciona:

  1. Call Stack (Pila de llamadas): La pila de llamadas es una estructura que mantiene un registro de las funciones que est谩n siendo ejecutadas en ese momento. Cuando una funci贸n se llama, se agrega a la parte superior de la pila, y cuando una funci贸n termina, se retira de la parte superior de la pila.

  2. Task Queue (Cola de tareas): La cola de tareas es donde se almacenan las tareas as铆ncronas que deben ejecutarse una vez que se complete la ejecuci贸n actual en la pila de llamadas. Estas tareas pueden ser eventos de temporizador, respuestas de solicitudes de red, eventos de interacci贸n de usuario, entre otros.


El ciclo b谩sico del Event Loop es el siguiente:

  1. El c贸digo s铆ncrono se ejecuta en la pila de llamadas. Si se encuentra una tarea as铆ncrona, se coloca en la cola de tareas.

  2. Una vez que la pila de llamadas est谩 vac铆a, el Event Loop verifica la cola de tareas. Si hay tareas en la cola, la primera tarea se mueve desde la cola de tareas a la pila de llamadas y se ejecuta.

  3. Si la tarea as铆ncrona tiene callbacks o promesas, estas pueden agregarse a la cola de tareas en lugar de ejecutarse inmediatamente.

  4. El proceso se repite continuamente: el c贸digo s铆ncrono se ejecuta, las tareas as铆ncronas se manejan cuando la pila de llamadas est谩 vac铆a, y as铆 sucesivamente.


Esto permite que JavaScript maneje eficientemente operaciones as铆ncronas y eventos sin bloquear la ejecuci贸n. En esencia, el Event Loop garantiza que las tareas as铆ncronas se ejecuten en el momento adecuado y en el orden correcto, manteniendo la capacidad de respuesta y la fluidez de la aplicaci贸n.


Ve谩moslo en c贸digo


Aqu铆 tienes un ejemplo simple en JavaScript que ilustra c贸mo funciona el Event Loop y c贸mo se manejan las tareas as铆ncronas utilizando setTimeout():

console.log("Inicio del programa");

// Tarea s铆ncrona: se agrega a la pila de llamadas
function tareaSincrona() {
  console.log("Tarea s铆ncrona ejecut谩ndose");
}

tareaSincrona();

// Tarea as铆ncrona: se coloca en la cola de tareas
setTimeout(function() {
  console.log("Tarea as铆ncrona ejecut谩ndose despu茅s de 2 segundos");
}, 2000);

console.log("Fin del programa");


En este ejemplo, tienes dos funciones: tareaSincrona() y una tarea as铆ncrona creada con setTimeout(). La ejecuci贸n ser铆a la siguiente:

  1. 鈥淚nicio del programa鈥 se muestra en la consola.
  2. tareaSincrona() se llama y muestra 鈥淭area s铆ncrona ejecut谩ndose鈥.
  3. 鈥淔in del programa鈥 se muestra en la consola.
  4. Despu茅s de esperar 2 segundos (2000 ms), la tarea as铆ncrona se mueve de la cola de tareas a la pila de llamadas y muestra 鈥淭area as铆ncrona ejecut谩ndose despu茅s de 2 segundos鈥.


Este ejemplo ilustra c贸mo el Event Loop maneja las tareas as铆ncronas y c贸mo se integran con las operaciones s铆ncronas en JavaScript. Recuerda que, en aplicaciones m谩s complejas, puede haber m煤ltiples tareas as铆ncronas en cola y el Event Loop se encargar谩 de manejarlas en orden.

A estas clases le falta mucho contenido te贸rico. 馃憖

Espero sea de utilidad. 馃懆鈥嶐煉

Gracias a Diego DG ya hab铆a entendido esto, de lo contrario no lo habr铆a comprendido en esta clase. 馃槄

Hola querido y querida estudiante que ve esta clase por primera vez y te ha costado mucho entender estos conceptos, entender como se contectan y como funciona esta vuelta.
.
Te lo aseguro que a mi tambi茅n me ha costado y ahora que tengo una idea m谩s clara de como funciona esto te lo voy a explicar.
.
As铆 que agarra muy bien tu cerebro, prepara tus asuntos comestibles y ponte tu cinturon de seguridad que te lo voy a contar
.
.
Un par de cosas antes de empezar:
.
Javascript lee el codigo secuencialmente, linea por linea, una por una en orden.
Eso de que es de un solo hilo, significa que hace una sola cosa a la vez
.
.
Ahora si, vamos con los conceptos
.
Primero, el event loop de forma tecnica es un patron de dise帽o y te lo puedes imaginar como un algoritmo que sigue unas reglas y pasos para manejar toda la informaci贸n que se est谩 ejecutando.
.
De donde viene esa inforamci贸n que se est谩 ejecutando???
.
Viene del codigo que escribiste amiguito o amiguita. Ese codigo que escribes, cuando lo ejecutas, lo primero que pasa es que se guarda en memoria (las funciones, variables y clases, no estoy seguro que m谩s) y as铆 llegamos al concepto del memory heap, que no es m谩s que donde se guardan esos elementos.
.
Ahora bien, que es esto del call stack?
.
Esta vaina es como una lista de tareas, donde cada funcion que escribiste es una tarea, esas tareas van entrando a la lista de forma ordenada y secuencial, seg煤n como las escribiste en tu codigo. Pero OJO, al call stack entran los llamados a esas funciones, no la definici贸n de la funcion, esta ultima es guardada en el memory heap. El llamado es esto:
.

sumarNumeros()

.
Alli estamos llamando a la funcion, ejecutandola. Esa tarea se agrega al call stack. No estoy seguro de que otro tipo de tareas se agregan al call stack, pero este es su principal uso, para el llamado de las funciones
.

.
Este call stack sigue el principio de 鈥渓ast in, first out鈥. Eso significa que la ultima funcion en entra es la primera que se ejecuta鈥
.
驴Como as铆?
.
Bueno, Mira esta funci贸n:
.

function llamadoA () {
	llamadoB()
}

function llamadoB() {
	console.log('Hola')
}

llamadoA()

.
Acabamos de definir 2 funciones y de llamar a la primera que a su vez llama a la segunda.
.
Cuando se est谩 leyendo y se llega a 鈥渓lamadoA鈥 esa tarea es agregada como la ultima en el call stack, y ahora javascript va al memory heap para ejecutar todo el codigo.
.
En este momento la tarea 鈥渓lamadoA鈥 es la ultima en entrar y est谩 siendo ejecutada, pero cuando javascript llega y lee lo que tiene la funcion por dentro, encontramos 鈥渓lamadoB鈥, que ahora es agregada como la ultima tarea, es leida, se ejecuta el console.log(鈥榟ola鈥) y es completada y sacada del call stack.
.
Ahora javascript continuar谩 leyendo el resto de 鈥渓lamadoA鈥 para completarla y sacarla del call stack.
.
Eso es lo que significa el principio de LIFO.
.
Entonces si el call stack es la lista de tareas (donde cada tarea es principalmente un llamado a una funci贸n guardada en el memory heap)鈥 Que es el task queue y el micro task queue?
.
Basicamente son tambien listas de taras, pero por la naturaleza de esas tareas deben separarse, as铆 es el cuento鈥
.
Cuando el call stack est谩 vacio, o sea que no hay tareas pendientes en ese momento, el event loop (ese 鈥渁lgoritmo鈥 que procesa todas esa tareas) va y revisa si hay alguna tarea PRIMERO en el micro task queue, y si la hay, ejecuta todas las tareas que haya para luego pasar al task queue.
.
Cual es la diferencia entre el micro task queue y el task queue?
.
El micro task queue tiene una mayor prioridad, el event loop primero chequea esa lista, en ella se guardan tareas como:
.

Promesas: Cuando una Promesa se cumple o se rechaza, las funciones asociadas (.then(), .catch(), .finally()) se ponen en el micro task queue. Esto te permite manejar el resultado de la Promesa.
Observadores de Cambios: Los observadores de cambios revisan el DOM (Document Object Model) en busca de modificaciones. Cuando se detecta un cambio, se ponen en el micro task queue las funciones correspondientes. Esto te permite responder a los cambios en el contenido o estructura del DOM.
.
queueMicrotask(): Este m茅todo te permite programar una tarea personalizada en el micro task queue. As铆 puedes controlar su ejecuci贸n en orden.
.
.
Mientras que en el task queue se guardan tareas como:
.
Eventos de la interfaz de usuario: interacciones del usuario, como clics o pulsaciones de teclas.
.
Eventos de temporizador: tareas programadas para ejecutarse en un momento espec铆fico. Como setTimeOut() o setInterval()
.
Eventos de red: respuestas a solicitudes de red, como obtener datos o hacer llamadas a API.
.
Eventos del sistema: eventos relacionados con el sistema o el navegador, como cambios de tama帽o de ventana o carga de recursos.
.
Y ya, hemos llegado al final de la explicaci贸n de estos coneptos, espero que ya tengas una idea general y m谩s clara de como funciona esto.
.
El siguiente, es un resumen provided by ChatGPT.
.
El asincronismo en JavaScript puede parecer complicado al principio, pero podemos entenderlo f谩cilmente. Imagina que est谩s en una fila de tareas, donde cada tarea es una funci贸n que debes realizar. Esta fila se llama 鈥渃all stack鈥 y sigue el principio de 鈥溍簂timo en entrar, primero en salir鈥. Pero hay otras dos filas importantes: la 鈥渕icro task queue鈥 y la 鈥渢ask queue鈥. Cuando terminas una tarea en la 鈥渃all stack鈥, revisas primero la 鈥渕icro task queue鈥 y realizas todas las tareas pendientes all铆. Luego, pasas a la 鈥渢ask queue鈥 y realizas las tareas de all铆. La diferencia es que la 鈥渕icro task queue鈥 tiene prioridad y se utilizan para tareas importantes como manejar promesas o cambios en el DOM. La 鈥渢ask queue鈥 es para tareas como eventos de usuario, temporizadores, solicitudes de red y eventos del sistema. As铆 es como JavaScript maneja las tareas de forma asincr贸nica, permitiendo que otras tareas se ejecuten mientras esperamos respuestas o realizamos acciones importantes.

*Flujo de una app - Heap: espacios asignados de forma aleatoria - Call Stack: funciones del programa (pasan por cierta prioridad -. microtasks y promesas ) - Web APIs: manejando y manipulando el DOM, relizando peticiones - Call back Queue : actividades y elementos o acciones desecadenadas para pasar nuevamente por la pila -- flujo de la informaci贸n de la l贸gica

En resumen, el event loop es un componente clave en la programaci贸n as铆ncrona que permite manejar m煤ltiples tareas concurrentes de manera eficiente al esperar y responder a eventos de manera secuencial y no bloqueante.

El event Loop es el loop de los eventos (?)

Si quedaron con el tema a medio entender como yo 馃槄, les recomiendo este video, explica s煤per bien y se logra dar a entender de muy buena manera *A mi parece que es as铆, que opinan?

Hace tiempo vi este video del JsCof que lo deja m谩s claro.
https://www.youtube.com/watch?v=8aGhZQkoFbQ

En ese video se explica este concepto y otras cosas
https://youtu.be/C_eFawNnmC4

El creador de la pagina que mostro el profesor dio una explicacion en youtube muy buena (esta ingles). La podes ver aca

En la ruta de aprendizaje tuve que ver a la clase de fundamentos NodeJS
https://platzi.com/cursos/fundamentos-node/
para devolverme y completar la presente

Este video me ayud贸 muchisimo a entender el Event Loop en solo 10 minutos 馃槂

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

Si no te quedo muy claro

Encontre este video que me ayudo a entender como funciona el Event Loop
https://youtu.be/GVJ1J0D13PE

Task Queue via ChatGPT

El Task Queue en JavaScript es una cola de tareas que se procesan en el navegador en el orden en que se han a帽adido. Cada tarea se ejecuta en un momento determinado en el ciclo de eventos de JavaScript.
Un ejemplo de uso de un Task Queue es a帽adir una tarea para actualizar el layout de la p谩gina despu茅s de un evento de redimensionamiento de ventana:

window.addEventListener("resize", function() {
  setTimeout(function() {
    console.log("El layout de la p谩gina ha sido actualizado");
  }, 0);
});

En este ejemplo, despu茅s de cada evento de redimensionamiento de ventana, se a帽ade una tarea al Task Queue para actualizar el layout de la p谩gina. La tarea se ejecutar谩 en el pr贸ximo ciclo de eventos de JavaScript despu茅s del evento de redimensionamiento de ventana.

LIfo (Last Input First Output)

Simplificando podemos decir que este es un event loop jajaj

Event Loop via ChatGPT

El Event Loop es el coraz贸n del modelo de concurrencia en JavaScript, que permite a la aplicaci贸n manejar varias tareas al mismo tiempo sin bloquear o detener la ejecuci贸n del c贸digo principal. Es decir, permite a JavaScript ejecutar varias tareas a la vez de forma as铆ncrona.

Para entenderlo de manera m谩s clara, piensa en una persona que trabaja en un restaurante y tiene que atender a varios clientes a la vez. La persona (el Event Loop) toma nota de las tareas que los clientes piden (callbacks) y las va ejecutando en el orden en que las recibe, mientras contin煤a atendiendo a otros clientes. Si alguna tarea requiere m谩s tiempo para ser realizada, la persona la delega a otro empleado y se centra en atender a otros clientes, para que el restaurante (la aplicaci贸n) no se detenga.

En JavaScript, los callbacks son ejecutados en el orden en que son recibidos por el Event Loop, y si una tarea requiere m谩s tiempo para ser realizada (por ejemplo, una petici贸n a un servidor), se registra en una cola y se ejecuta en su momento, permitiendo que la aplicaci贸n contin煤e su ejecuci贸n.

En resumen, el Event Loop es la forma en que JavaScript maneja la concurrencia, permitiendo a la aplicaci贸n realizar varias tareas a la vez de manera eficiente y sin detenerse.

De esta clase me quedo con el concepto que el Event Loop es

La manera en que Javascript distribuye las funciones de una aplicacion en base a los eventos que ocurran.

Si viene de la ruta javascript fullstack, te recomiendo desviarte a este curso, una vez tomado, entender谩s[]todo lo que est谩 diciendo el profesor!
Curso javascript V8

隆Buenas, buenas! Les comparto mis notas.

Clase 3: Event Loop

Es un patron de dise帽o que espera y distribuye eventos o mensajes en un programa.

  1. Memory Heap. Los objetos son asignados a un monticulo (espacio grande en memoria).

  2. Call Stack. Apila de forma organizada las instrucciones de nuestro programa. LIFO. Last-in, First-out.

  3. Task Queue. Cola de tareas, se maneja la concurrencia, se agregan las tareas que ya est谩n listas para pasar al Stack. El Stack debe estar vac铆o.

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

  5. Web APIs. Javascript del lado del cliente.

  6. Event Loop. Tarea asignada para mover del Task Queue al Stack, solo si Stack esta vacio

Por si sirve de apoyo a esta clase les dejo mis notas de la misma tematica pero dada por Diego De Granda en el curso de V8鈥 Creo que es mucho mas claro y lo explica con una taquer铆a:

// Ejercicio de asincronismo de Diego De Granda en Curso de JavaScript
// Engine (V8) y el Navegador. 

// Tengo una taquer铆a aliada con una casa de tortas. La misma recibe pedidos de tacos y los prepara y entrega, pero tambi茅n recibe pedidos de tortas que los pasa al local de al lado que se ocupa de hacer tortas. 
// Cuando el local de al lado termina la torta que le pidio la taquer铆a, deja la misma en espera hasta que la taquer铆a entregue todos sus tacos para poder entregar la torta que le pidieron. Ej en JS: 

console.log("Taco 1");
console.log("Taco 2");
console.log("Taco 3");
setTimeout(() => { // setTimeout es una API del navegador. 
    console.log("Torta")
}, 500) // 500 es medio segundo. 
console.log("Taco 4");

// Entran estos pedidos en orden. 驴En que orden saldr谩n con asincronismo? 

/*
Output:
Taco 1
Taco 2
Taco 3
Taco 4
Torta
*/

// Sale ultima la torta porque es derivada a la Web API del navegador y vuelve a la pila de tareas de JS cuando esta haya terminado las suyas. Por eso es que si el tiempo de timeout baja a 0 igualmente va a salir ultima. Veamos: 

console.log("Taco 1");
console.log("Taco 2");
console.log("Taco 3");
setTimeout(() => { // setTimeout es una API del navegador. 
    console.log("Torta")
}, 0) // 500 es medio segundo. 
console.log("Taco 4");

/*
Output:
Taco 1
Taco 2
Taco 3
Taco 4
Torta
*/

// Memory Heap: Son las funciones en memor铆a de JS. Son las funciones que construimos y que JS interpreta. Tmb est谩n ah铆 las variables. 

// Call Stack: Es la pila donde se van almacenando y ordenando los pedidos o procesos que JS debe ejecutar. Cuando se encuentra con procesos asincronicos los pasa, por ejemplo, al navegador...

// Web API麓s: El navegador le da a sus Web API麓s los procesos derivados del Call Stack que deben realizar. Una vez concluidos pasan al Callback Queue...

// Callback Queue: Es un espacio de ordenamiento y espera de los procesos que el navegador con sus Web API麓s ya concluyo y que deben ser devueltos a JS. Para eso interviene el Event Loop...

// Event Loop: Mir谩 permanentemente que la Call Stack se vacie para devolverle procesos que ella misma env铆o a las Web API麓s ya concluidos para que JS pueda ejecutarlos. 

Para que no se ejecute tan r谩pido puse un while, mientras se ejecuta el while da tiempo a entender lo que paso y lo que va a pasar.

var pause = function(interval){
    var dt = new Date();
    while ((new Date()) - dt <= 10000) { 
    //wait 
    }
}
<code> 

Herramienta gr谩fica para entender el Event Loop en JavaScript

La Metodologia del Call Stack es FIFO no LIFO

Para las personas que sepan ingl茅s, encontre una incre铆ble charla que ayuda a entender el event loop y todo el proceso de trabajo del asincronismo
https://www.youtube.com/watch?v=8aGhZQkoFbQ

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.

Muy buena la herramienta Loupe

Muy buena esta tool de Loupe! 馃憦馃徎

Muy bueno el aporte de la web que muestra como funciona todo el ciclo!!! Gracias!

Con velocidad 0.5 y parandolo finalmente logr茅 entenderlo jeje

Hice este cambio para que corriera un poco m谩s lento.

$.on('button', 'click', function onClick() {
    setTimeout(function timer() {
        console.log('You clicked the button!');    
    }, 10000);
});

console.log("Hi!");

setTimeout(function timeout() {
    console.log("Click the button!");
}, 10000);

console.log("Welcome to loupe.");

Estuve bastante rato jugando con el tema y es super interesante!
Este es a lo que llegue que demuestra bien el asincronismo (Segun yo)

	setTimeout(() => {
    for (let i = 0; i < 10; i++){
        console.log('anotherThing ' + i);//Execute second
    }
},200); 
setTimeout(() => {//Execute last
    console.log('thingA');
    console.log('thingB');
    console.log('thingC');
    console.log("thingD");
},300)
setTimeout(() => { 
    console.log('anotherThing');//Execute first
} ,100);

resultado

anotherThing
anotherThing 0
anotherThing 1
anotherThing 2
anotherThing 3
anotherThing 4
anotherThing 5
anotherThing 6
anotherThing 7
anotherThing 8
anotherThing 9
thingA
thingB
thingC
thingD

Un even loop es una llamada a nuestra Api o nuestro alojamiento de datos y cuando se haga la pregunta , dejamos que el eemento que alija nuestoes datos tenga los datos y s贸lo hasta que los tenga escuchpamos su respuesta

Esta - es - una - de las - clases - mas - di - ficiles - de - en - tender - para - algo - que - creo - pudo - ser - mas - claro - y mucho - mejor - ex - plicado.

Elementos del navegador:

  • Memory heap:
    • Es un espacio grande en memoria no organizado.
    • Dedicada al alojamiento de objetos.
    • Es compartida por todo el programa y controlada por un recolector de basura que se encarga de liberar aquello que no se necesita.
  • Call Stack:
    • Traducido, pila de llamadas, se encarga de albergar las instrucciones que deben ejecutarse.
    • Apila de forma organizada las instrucciones de nuestro programa.
    • Nos indica en que punto del programa estamos, por donde vamos.
    • El funcionamiento es LIFO: last in, first out.
    • Cada llamada a funci贸n de nuestra aplicaci贸n, entra a la pila generando un nuevo frame (bloque de memoria reservada para los argumentos y variables locales de dicha funci贸n).
    • Por tanto, cuando se llama a una funci贸n, su frame es insertado arriba en la pila, cuando una funci贸n se ha completado y devuelve, su frame se saca de la pila tambi茅n por arriba.
    • De este modo, las llamadas a funci贸n que est谩n dentro de otra funci贸n contenedora son apiladas encima y ser谩n atendidas primero.
  • Web APIs (Schedule Tasks)
    • Las tareas as铆ncronas esperan a que se cumpla la condici贸n o termine el proceso para pasar al task queue.
    • JavaScript del lado del cliente: setTimeOut, XMLHttpRequest, file reader, DOM.
    • Node: fs, https
  • Cola de tareas (Queue):
    • Se agrega las tareas que ya est谩n listas para al stack.
    • El call stack debe estar vac铆o para ser enviadas.
    • Cada vez que nuestro programa recibe una notificaci贸n del exterior o de otro contexto distinto al de la aplicaci贸n (como es el caso de operaciones as铆ncronas), el mensaje se inserta en una cola de mensajes pendientes y se registra su callback correspondiente.
    • Recordemos que un callback era la funci贸n que se ejecutar谩 como respuesta.
  • Micro task queue
    • Es una cola para las tareas as铆ncronas de promesas.
    • Esta cola tiene una prioridad superior a la task queue.
  • Event Loop:
    • El bucle de eventos es un patr贸n de dise帽o que espera y distribuye eventos o mensajes en un programa.
    • Encargada de ver si la pila de ejecuci贸n esta vac铆a para entonces enviar le la tarea de la cola y sean ejecutadas.

En esta clase vimos conceptos relacionados a la ejecucion de JS:
Memoria heap:

  • Espacio de memoria no organizado donde se guardan objetos.
  • Estos objetos pueden ser variables o funciones.

Call stack:

  • Se encarga de apilar las tareas de nuestro programa.
  • Con cada ejecucion de una funcion se apila un elemento, y al finalizar la funcion se desapila el elemento.
  • Esto permite al programa saber en que punto de la ejecucion se encuentra.

JS Engine:

  • Conformado por el memory heap y el call stack.

Schedule Tasks (web APIs):

  • Las tareas as铆ncronas llegan la schelue task ( tareas agendadas) donde esperan a que se cumpla la condici贸n o termine el proceso para pasar al task queue.

Task Queue:

  • Es una cola donde esperan las tareas listas para regresar al call stack.
  • El stask debe estar vacio para el regreso de la tarea.

Microtask Queue:

  • Similares al task queue.
  • Aqui se agregan las promesas.
  • Esta tiene una prioridad sobre la task queue.

Event loop:

  • Encargado de observar si el call stack se encuentra vacio y pasarle una tarea en el queue.

La PILA DE EJECUCI脫N (Call Stack) de JAVASCRIPT (Sacha Lifszyc)
https://youtu.be/ygA5U7Wgsg8

Les comparto un Gif del recorrido con la herramienta Loupe. Ver en tama帽o original:

Otra cosa a tener en cuenta en la cola de tareas, son las tareas propias del navegador, como renderizar la pantalla, chrome renderiza la pantalla cada 16 m/s, y estas tareas tambi茅n se suman a la pila de ejecuci贸n cuando hacemos un llamado a una API, por eso no debemos bloquear la pila de ejecuci贸n ya que podemos frenar el renderizado del navegador y hacer que se vea menos fluido para el usuario鈥

El profesor no se percato de un peque帽o error de c贸digo si observan a partir de la setencia once no lee las siguientes l铆neas de c贸diga.

Borren todo as铆 copian y pegan lo posteriori:
$.on(鈥榖utton鈥, 鈥榗lick鈥, function onClick() {
setTimeout(function timer() {
console.log(鈥榊ou clicked the button!鈥);
}, 2000);
});

console.log(鈥淗i!鈥);

$.on(鈥榖utton鈥, 鈥榗lick鈥, function onClick() {
setTimeout(function timeout() {
console.log(鈥楥lick the button!鈥);
}, 5000);
});

console.log(鈥淲elcome to loupe.鈥);

  1. Al ejecutar el c贸digo por primera vez se leen los dos console.logs y el setTimeout; pero la funci贸n On(del click) no; porque espera ser accionada por el bot贸n.

  2. Cuando se oprime el bot贸n el flujo comienza desde el web api detectando la acci贸n y que luego env铆a el evento al callback queue y este lo env铆a al callstack cuando este vaci贸.

  3. El callstack manda a ejecutar el funcionamiento de la funci贸n que es el timer y vuelve a llamar a la funci贸n en Web Apis. se espera el tiempo y cuando se cumple. Entonces lo regresa al callback y seguidamente al callstack que es donde termina de imprimir.

I made this timer when I was playing with the loupe website editor. It was really fun. If you have more ideas, leave a comment please.

/* This is a timer that use the trigger function to call the
 * onClick function for the first time with an argument
 * n equals to 1, then use the setTimeout call to call
 * the onClick function every 1s.
**/

function onClick(n) {
    setTimeout(function () {
        console.log("tic : " + n);
        onClick(n+1);
    }, 1000);
}

function trigger() {
    onClick(1);
}

$.on('button', 'click', trigger);

Esta explicaci贸n es genial.click

Las APIs (Interfaces de Programaci贸n de Aplicaciones) son construcciones disponibles en los lenguajes de programaci贸n que permiten a los programadores crear funcionalidades complejas de una manera simple.

JavaScript tiene varias APIs, pero estas no son parte del lenguaje en s铆, sino que est谩n construidas sobre el n煤cleo del lenguajes para darle superpoderes. Estas se dividen en dos:

  • Las APIs del navegador: est谩n integradas en el navegador y se pueden utilizar de inmediato. Como por ejemplo, setTimeout()

  • Las APIs de terceros: no est谩n incluidas en el navegador, y es necesario obtener el c贸digo desde alg煤n lugar de la Web.

Aqu铆 igual se explica muy bien

Le hice algunos peque帽os cambios,
y se puede apreciar un poco mejor

$.on('button', 'click', function onClick() {
    setTimeout(function timer() {
        console.log('Apretaste el bot贸n!');    
    }, 4000);
});

setTimeout(function timeout(){
    console.log("Hola!");
},4000)

setTimeout(function timeout() {
    console.log("Presiona el bot贸n!");
}, 4000);

setTimeout(function timeout(){
    console.log("Bienvenido a la lupa!");
},4000)

Web APIs

Call Stack (pila)

Task Queue (Cola de Tareas)

Ya hacia falta un curso en Platzi como este, bastante completo en la explicacion del tema de Event Loop

resumen:
sheduled task : son las tareas que se ejecutaran en un futuro no inmediato.
microtask: donde van las promesas(tienen prioridad sobre las otras tareas)
task queue: cola de las demas tareas(irian despues de las promesas al stack)
stack: lugar donde por fin se ejecuta la tarea(promesas y/o tareas como un request, etc)
event loop: es el que siempre checa esas tareas pendientes para mandarlas al stack dando prioridad a las microtask y luego al task queue siempre y cuando el stack este vacio
Proceso:
las tareas se distribuyen entre promesas y las demas tareas
dando prioridad a las promesas(microtask) siendo esto lo primero que va a chequear el event loop
las demas tareas(que no son promesas), van al task queue(cola de tareas)
luego, esta el event loop, que es el que siempre esta preguntando si hay tareas por realizar ,
primero en las microtask(prioridad) que es donde estan las promesas y luego checa en la task queue (cola de tareas), si tienen tareas pendientes, las empuja al stack siempre y cuando este este VACIO, de lo contrario, va a esperar a que se vacie