Event Loop

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

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: “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.

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…

¡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

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

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.

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 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: “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).
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.

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 “this” 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 🥵 🥵 🥵

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.

Muy pobre la explicación de esta clase.

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.

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.

Event Loop en JavaScript

El “Event 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. “Inicio del programa” se muestra en la consola.
2. tareaSincrona() se llama y muestra “Tarea síncrona ejecutándose”.
3. “Fin 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 “Tarea 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. 👨‍💻

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

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!

Mis apuntes del Event Loop y Callback Queue https://coda.io/d/_djCO9D-Iyr0/The-Callback-Queue-and-Event-Loop_suPJd

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.

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 “last 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 “llamadoA” 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 “llamadoA” es la ultima en entrar y está siendo ejecutada, pero cuando javascript llega y lee lo que tiene la funcion por dentro, encontramos “llamadoB”, que ahora es agregada como la ultima tarea, es leida, se ejecuta el console.log(‘hola’) y es completada y sacada del call stack.
.
Ahora javascript continuará leyendo el resto de “llamadoA” 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 “algoritmo” 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 “call stack” y sigue el principio de “último en entrar, primero en salir”. Pero hay otras dos filas importantes: la “micro task queue” y la “task queue”. Cuando terminas una tarea en la “call stack”, revisas primero la “micro task queue” y realizas todas las tareas pendientes allí. Luego, pasas a la “task queue” y realizas las tareas de allí. La diferencia es que la “micro task queue” tiene prioridad y se utilizan para tareas importantes como manejar promesas o cambios en el DOM. La “task 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

Mis apuntes en Notion💚

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

Apunte en Notion

LINK: https://pogolo.notion.site/3-Event-Loop-9707287715854609a20757a7bafaf151

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! 👏🏻

Asíncronismo en JS - Notion

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.");

Acá ún enlace sobre este tema: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

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(‘button’, ‘click’, function onClick() {
setTimeout(function timer() {
console.log(‘You clicked the button!’);
}, 2000);
});

console.log(“Hi!”);

$.on(‘button’, ‘click’, function onClick() {
setTimeout(function timeout() {
console.log(‘Click the button!’);
}, 5000);
});

console.log(“Welcome 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