Qué es la asincronía en JavaScript

Taquería DeGranda presenta a:
.
🌮 - call stack : el taquero (órdenes rápidas)
👨‍🍳 - web APIs : la cocina
🌯 - callback queue : las órdenes preparadas
💁‍♂️ - event loop : el mesero
.
a que quedó súper claro el JS Runtime y cómo funciona el asincronismo!? 🤪

Te esperare en el callback queue, paciente, hasta que el call stack de tu corazón se sienta listo para recibirme

Cursos que te vuelan la cabeza.
Me gustan estos cursos más cortos y muy completos.

La mejor explicación de asincronismo que he escuchado. 👌🏼

Si se quedaron con duda, aquí un ejemplo gráfico para entender mejor:

ENTENDÍ TODO, BUEN SERVICIO! 5 ESTRELLAS!

Asincronía
Por default corre una tarea a la vez – Sincronismo
Ahora veremos que es el asincronismo
Memory Heap: Espacio donde se guardan funciones y variables
Call Stack: Donde se apilan todas las tareas que tenemos que hacer con Javascript
Web API´s (Ofrecidas por el navegador para manipular lo siguiente)

• Dom(document)
• AJAX(XMLHttpRequest)
• Timeout(setTimeout)
  Call Back Queue: El orden en que se van a ejecutar a funciones
  Al momento de usar asincronismo sacamos funciones del Call Back Queue que no serán ejecutadas por javascript y serán ejecutadas por el navegador despues
  Ejemplo

console.log('taco 1')
console.log('taco 2')
console.log('taco 3')
setTimeout(()=>{
    console.log('torta 1')
},1000)
console.log('taco 4')
setTimeout(()=>{
    console.log('torta 2')
},500)
setTimeout(()=>{
    console.log('torta 3')
},0)

Definitivamente cuando lo explican con comida es mas fácil de entender 😃
Muy buena explicación!!!

Me encanta como el profe De Granda explica temas tan técnicos de una manera tan simple para que todos tengan claro cómo funciona.
Encantado con éste curso! 😄

Esta clase me encantó porque, logró explicarlo en una manera muy “coloquial”.

Antes que copien y peguen el siguiente script reflexionen sobre su output:

console.log('taco 1')
console.log('taco 2')
console.log('taco 3')
setTimeout(()=>{
    console.log('torta 1')
},1000)
console.log('taco 4')
setTimeout(()=>{
    console.log('torta 2')
},500)
setTimeout(()=>{
    console.log('torta 3')
},0)

06:03: cocina, tacos, torta… aquí es cuando vas al refrigerador

**Asincronismo: **
Cuando hablamos del asincronismo hablamos del siguiente proceso →

• En el JS runtime enviroment se comienza a ejecutar nuestro codigo haciendo uso del Memory Heap y el Call Stack.
  Pero haciendo uso del Timer una de nuastras Web API’s (API’s del V8 de chrome). Podemos “delegar” codigo que el browser va a ir preparando simultaneamente pero sin ejecutarse todavia. Los resultados de este codigo solo entraran en escena cuando sea autorizado por el Event Loop.

• El codigo delegado debe ser guardado bajo el method setTimeout(), este lo pasara por la API Timer. Que organizara el codigo en un Callback Queue

• El orden en que se van a ejecutar estas acciones se ubica en el Callback Queue.

• Este codigo “delegado”, listo para ejectutarse segun el Callback Queue solo se ejecutara cuando las tareas en el Call Stack esten hechas.

• El event loop se encarga de verificar iterativamente si el Call Stack esta vacio, para luego permitir la ejecucion de las acciones en el Callback Queue

pd: No me quedo muy claro si el Timer es una API o no, asi que si tengo mal esa parte sientase libre de corregirme.

El event loop es una de las cosas mejores pensadas

Hasta que usaron tacos como ejemplo entendí el asincronismo. xD

Creo que aquí faltó hablar sobre las promesas y las “microtasks queues”, recomiendo esta clase del curso profesional de JS para que vean ese punto.
https://platzi.com/clases/1642-javascript-profesional/22169-event-loop/
Cabe resaltar que las “Microtasks queues” tienen preferencia ante la “Callback queue”

Listo
1

console.log("taco 1");
console.log("taco 2");
console.log("taco 3");
    
setTimeout(() => {
    console.log("torta");
},500)
console.log("taco 4");

2

console.log("taco 1");
console.log("taco 2");
console.log("taco 3");
    
setTimeout(() => {
    console.log("torta");
},0)
console.log("taco 4");

La Asincronia se da cuando el JavaScript entrega funciones al navegador para que el las ejecute mientras JavaScrip se sigue ejecuntando con normalida y esto se da en paralelo, cuando el navegador termina de ejecutar lo que le corresponde pone lo que termino en una bandeja de espera, llamada Callback queue endonde el codigo ejecutado esperara su turno para pasar al call Stack y mostrar lo que ejecuto el navegador, antes de motrarse en el callstack interviene algo llamado event loop quien es el encargado de preguntarle al call stack si se encuentra vacio para empezarle a pasar lo que tiene en el callback queue, si el callstack esta ocupado pues seguirán esperando en el callback queue y si esta vacio empezara a recibir esas funciones.

Si el callstack no esta vacion JavaScrip nunca empezara a recibir las funciones que se encuentran en el Callback queue y precisamente el event loop es el encarhado de validar si el callstack esta vacio o no para asi generar la conexion entre el callstack y el callback queue

Hola amigos, encontré un video en donde explica de manera visual mediante la herramienta loupe como se comportan los procesos explicados en este video (Call Stack, Web Apis, Callback Queue, Event Loop), se los recomiendo, lo único que necesitan hacer es introducir código (pueden usar el que el profesor usa) y la herramienta les mostrará de manera dinámica y paso a paso cómo ocurre la “magia”. 😃

Super de acuerdo con los demás comentarios que está es la mejor explicación de asincronísmo. 😁

Les dejo una nota del curso de fundamentos de JavaScript

while(true){
console.warn(' NO VOY A BLOQUEAR EL EVENTLOOP')
 }

De verdad el profe Diego de Granda es excelente.

• Te prepara una clase de asincronismo con Tacos.
• Te enseña como son algunas entrevistas.
• Y usa ejemplos excelentes.

Ví este vídeo como 9 veces

Mas claro no pudo quedar, no se me haría raro que Diego gane como mejor profesor platzi , explica muy bien , gracias profe

Gran explicación para terminar este curso 😃

bravooo 😄 ❤️ CURSO FAVORITO

Al fin pude entender el asincronismo. Muchas gracias Diego!!!

JavaScript Run Time

Conceptos
Memory Heap: Espacio en donde se guardan las funciones y las variables

Call Stack: Espacio en donde se estarán apilando todas las tareas de las cosas que debemos hacer en JS para darle interacción al navegador

Web API: Puede ofrecer APIs propias del navegador

• Que ayuden a manipular el dom
• Que ayuda a manipular el tiempo de respuesta de algunas funciones
• Que no ayudan a generar peticiones

Funciones que el navegador ofrece: https://developer.mozilla.org/en-US/docs/Web/API

Callback Queue: Bandeja de espera (espera a que el Call Stack este vacío).

Event Loop: Observador
Funcionamiento
JavaScript delega las tareas pertenecientes del navegador al navegar para continuar ejecutando las funciones que le son propias. En paralelo el navegador comienza a trabajar con esa función y al terminar la colocara en el Callback Queue.

Luego el Event Loop lo que hace es preguntar al Call Stack si termino con sus tareas y esta vació. En caso de que el Call Stack este ocupado con una tarea le dice “no”. En caso de haber terminado con sus tareas, el Event Loop mueve el Fn1 del Callback Queue al Call Stack.

Siempre que queramos ver las funciones de los API que ya vengan por defecto en el navegador, solo tenemos que en consola usar la variable “this” que hace referencia al elemento Window. Varios de estos elementos nos permiten convertir a java en Asíncrono.

Esto se pueda ver como, si tenemos nuestras tareas corriendo pero hay una función que tiene que hacer el navegador o una API. Entonces estas tareas se empezaran a ejecutar simultáneamente con las tareas del JavaScript, entonces las tareas que JS ya haya cumplido, pondrá estas tareas en un CallBack Queue que es como una bandeja de espera que esperara que nuestra Call Stack este vacío. Quien se encarga de preguntar si nuestra Call Stack esta vacío, es el event loop, que preguntara constantemente si el call stack ya termino sus tareas para mover las tareas en el CallBack Queue.

¿Que es?
Es la accion que no ocurre al mismo tiempo
CallBack es un asincronismo
Es una pizarra clave para Js asincronismo.
Una funcion que se passa como argumento de otra funcion .
como decir:
¿Que quieres hacer que una vez que tu taera termine?
EJEMPLO

setTimeout (function () {
	console.log('Hola mundo');
},4000)

setTimeout Una funcion que programa la ejecucion de un CallBack una vez transcurrido exitoso el tiempo que se le dio 1000 = 1 segundo.

EJEMPLO

setTimeout (function () {
	console.log('¡Hola llegue a tiempo!');
},1000)
console.log('¡Yo llegue primero!')

Primero se ejecuta ¡Yo llegue primero!
Luego llega '¡Hola llegue a tiempo!'
Porque tiene un tiempo para que se ejecute o se imprima el console

Busqué por muchos lados en la web la mejor explicación de como funciona el asíncronismo en JS, pero, hasta que encontre está joya, entendí realmente como funcionaba.

Javascript Asíncrono: La guía definitiva

Sin duda alguna la mejor explicación que jamás había encontrado, espero que les sirva, como a mi me sirvio.

Intentando descargar toda la información en una sola imagen haha

Daniel es una berraquera enseñando…gran profesor

Técnicamente se supone que entendí, pero como que algo no me cuadra

La mejor explicación de asyncronismo que e visto.

Se van a imprimir primero todos los tacos por que el taquero tiene prioridad, hasta que el taquero no termine todos los tacos, la cocina no puede mandar la torta.

Sería genial tener varios event loop, al menos uno por cada nucleo de la cpu

Va a ser una buena idea mas adelante tomar el curso de asincronismo en JS para poder profundizar todavía mas en estos conceptos.

Disfrute bastante este curso.

Excelente curso, cabe destacar que el rutime de JS en el navegador no es nada igual al del servidor.
Aunque ambos son JS (Node.js) y ambos corren con el motor V8, obviamente en el lado del servidor no existen las Web API’s, por lo tanto su funcionamiento es diferente.

mmmmm pasaria que… depende del tiempo en que se ejecute en el motor y el tiempo que se ejecute en el navegador, el resultado que saldria primero

La forma de explicar lo hace ver mas sencillo, al final junta las partes que había explicado para dar más contexto.

la mejor explicación que vi hasta el momento sobre el async de JS 😄 un genio el profe!!

Excelente forma de explicar Asincronía, cuando aprendí eso en el curso de fundamos de Js, me quede asombrado. 🤯✌

OJO: Es importante saber que para que las tareas que estén en el callback queue se ejecuten necesariamente el callstack debe estar vacío. Solo así el event loop pasará todas las operaciones del callback queue al callstack para que se puede ejecutar en el orden correcto 😃

Esta explicación de los tacos hizo que me diera hambre…

Buenas, como estan! Les comparto mi carpeta de Google Docs para que entre todos podamos seguir aportando a la toma de notas de un montón de los cursos de Platzi. Hagamos una comunidad!!!

https://drive.google.com/drive/folders/1SWGMgTMPbwgasbzcivcpcnIudc2vk_v0?usp=sharing

• Oye ya hiciste la torta?
  No

• Y ahora?
  NO

• y ahora?
  NOOO

• y ahora?
  QUE NOOOOOOO

• y ahora si?
  Toma tu torta!

El profe Diego explica superbien, y se hace entender de una forma muy fácil y concreta. Gracias también a los aportes de los compañeros, ya que la explicación toma nuevas dimensiones y se facilita también entender esta temática con mayor certeza.

Supongo que todo se entiende mejor con tacos…

Excelente clase, Diego!

Como vimos en la clase 5, JavaScript por defecto es síncrono, es decir que ejecuta una tarea a la vez según estén en el call stack, y mientras no termine de ejecutar una tarea no continua con la otra, esto hace que el proceso sea mucho más lento.

El asincronismo en JavaScript ocurre cuando tenemos ciertas tareas que el navegador va realizando mientras en paralelo el Call Stack va ejecutando otras tareas y las que se van terminando se agregan a una cola de espera (callback queue), mientras las demás se siguen ejecutando, luego cuando todas las tareas están listas termina de ejecutarse el código (event loop). Veamos como funciona mejor.

1. Guardamos las variables y funciones de JavaScript en el Memory Heap donde esperan a ser llamadas.
2. Se añaden las tareas a ejecutar al Call Stack
3. Si implementamos las funciones que nos proporciona el navegador (Web APIs) el Call Stack se las manda al navegador señalandole que tiene tareas por realizar.
4. Ahora, cuando corre el código, el Call Stack de JavaScript empieza a ejecutar las tareas que tiene mientras el navegador en paralelo va ejecutando las que le corresponden.
5. Las tareas que estén terminadas, se van añadiendo a la cola de espera (el callback queue) mientras las otras se van ejecutando. Luego que estén listas todas las tareas restantes (las del navegador), pasan del callback queue al call stack donde irán saliendo. -Entonces primero se entregan las tareas que se realizaron inmediatamente y pasan al callback queue, que esperan por las tareas del navegador que se están ejecutando, por lo que primero salen las inmediatas al call stack y luego las que hizo el navegador-.
6. Luego entra el Event Loop que es el monitor que va checando si ya el callback queue tiene todo listo para mandar la función del navegador al call stack. Luego que el Call Stack ejecute las tareas inmediatas y las del navegador y esté vacío, el código se termina de ejecutar.

Madre Santa, ahora cada que haga un setTimeout se me va a antojar una torta.

Buena explicación del asincronismo, excelente clase 😃

Fantástica explicación. Un grande Diego!

Event Loop ❤️

Primero todos los tacos, después de 500ms la torta, jaja tacos, tortas, que diantres, por eso amo Platzi.

Super refrescantes los cursos con diego

A veces es mejor que la cabeza (el call stack) descanse un poco para poder enviar más callback queues (más trabajo) a través de nuestro event loop (esfuerzo).

La verdad es que la labor de Diego es increíble, he entendido esto a la perfección y mira que es complejo.

YO: Nadie puede explicar la asincronia de Javascript de manera detallada y divertida en 11:08
La clase: …

Les dejo mi apunte, esta muy completo y explica todo lo que el docente dijo, ademas puse informacion que recopile por ahi. Espero les pueda ayudar para entender esto de mejor manera y a profundidad desde la logica.

Todo el apunte

Parte 1

Parte 2

Mi Resumen.

Para que se de el efecto de Asynchronous, se usan las funciones que el navegador ya tiene (Web APIs).
Cuando JS en el Call Stack tiene una tarea que contiene ** una función que ya tiene el navegador** (objeto global o window), se la manda a esta Web API.
Específicamente, en el ejemplo en clase el JS lo decide mandar por que** contiene la función setTimeout** que el navegador puede ejecutar. Es por eso que aunque el timer en esta función sea cero “0”, se sigue efectuando el proceso de asincronismo, por que entra al Web API y sale al final, cuando se acabaron las tareas en el Call Stack.

Por eso entiendo que si en el código de JS que nosotros ejecutaremos no hay funciones (Web APIs) que el navegador tenga, nunca se hará el efecto Asynchronous.

El motor JS V8

Aquí dejo un video por si quieren profundizar Link
Una vez que Chrome recibe el código o los scripts javascript en la página web, el motor JS V8 comienza a analizarlo. Primero, analizará parcialmente el código comprobando errores de sintaxis. Si no encuentra ninguno, comienza a leer el código de arriba a abajo. Su objetivo final es convertir el código javascript en código de máquina que la computadora pueda entender. Pero antes de comprender qué hace exactamente con el código, debemos comprender el entorno en el que se analiza.

Event Loop

Tarea asignada para mover del Tas Queue al Stack, Solo si el Stack esta vacío

Memory Heap (Montón)

• Donde se almacena los valores de las variables y las funciones
• Se destina un espacio en memoria para las variables.
• La información en el memory heap, No se guarda de manera lineal

EL MONTÓN

El primer contenedor en el entorno, que también forma parte del motor V8 JS Engine, se denomina “montón de memoria”. A medida que el motor JS V8 encuentra variables y declaraciones de funciones en el código, las almacena en el montón .

Call Stack (Pila) = El ultimo que entra es el primero en salir

• Como se mandan a llamar las variables y las funciones
• Las tareas en el callstack se apilan de abajo hacia arriba.
• Se llaman de la última que mandamos a llamar hacia abajo
• En la base de la pila reposa el Global Object
• Si una función llama a otra, la pone encima de la pila.
• Se ejecuta una tarea a la vez (sincronía)
• Una vez que se van ejecutando las tareas se van retirando de la pila
• Al ejecutar todas las tareas se retira el Global object.

LA PILA

El segundo contenedor en el entorno se denomina “pila de llamadas”. También es parte del motor JS V8. Cuando JS Engine encuentra un elemento procesable, como una llamada a función, lo agrega a la pila .

Task Queue (Cola) = El primer que entra es el primero en salir

Cola de tareas, se maneja la concurrencia, se agregan las tareas que ya están listas para pasar el stack (Pila). El stack debe de esta vacío

MicroTask Queue (Micro Tareas)

Las promesas tienen otra forma de ejecutarse y una prioridad superior

Web APIs

JavaScript del lado del cliente: setTimeout, XMLHttpRequest, File reader, DOM

Node: fs, https

Garbage Collection

limpia la memoria de los datos no utilizados para no sobrecargarla y seguir trabajando sin problemas.

Que significa navegador per se?
min 1:54

ASINCRONISMO (ASYNCHRONOUS)

- Las funciones por defecto/default de window se las da al navegador!!!, no las ejecuta el motor de javascript
- El motor de javascript sigue ejecutando las tareas que el tiene
- Cuando terina el navegador pone las tareas en un callback queue para que cuando termine el motor de javascript de ejecutar
  sus tareas las mueva
- Hay un EVENT LOOP que se encarga de estar preguntando a javascript si ya termino de ejecutar sus tareas

El Event loop es una cola de funciones. Cuando se ejecuta una función asíncrona, la función devuelve el código interno de la función, lo envuelve y se inserta en una cola.
El motor de JavaScript manda las operaciones a la cola y hace que se procesen en segundo plano para no bloquear las demás operaciones.

en node seria lo mismo ? o que sustituye las web APIs ?

ahora entendi de donde salen todas las APIs 😉

Aquí hay una pagina que explica muy bien como funciona el event loop y la asincronía, suerte!
https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

Wow, la explicación fue magnífica, pude entenderlo tranquilamente.

Que gran explicación todo claro.

Excelente explicación acerca del Event Loop 👍🏻

Waaao, Diego, eres increíble explicando. Todo claro

![](

Comparto un post que explica un poco más de promesas y async await. Espero les guste y y que puedan dejar feedback! Gracias.

https://platzi.com/tutoriales/1789-asincronismo-js/5063-las-promesas-y-async-await-logicamente-no-son-iguales-y-te-explico-el-porque/

La mejor explicación que he visto en todos los cursos de JS que he tomado en Platzi

INCREIBLE EXPLICACION Y EJEMPLO !! GRACIAS DIEGO

La forma en la que explica Diego de Granda es sencillamente excepcional, este tema personalmente era algo que me costaba entender desde hace un tiempo y en 11 minutos no me lo pudo haber hecho entender mejor.

Si queren resumir todo el módulo de ‘Código de Ejecución’:
https://mauriciogc.medium.com/javascript-cómo-funciona-el-runtime-environment-jre-8ebceafdc938

buaaaa, entender que el engine de JavaScript y el navegador son 2 cosas separadas me acaba de explotar la mente 🤯🤯🤯

Excelente Explicacion

Mejor explicado imposible. Gracias Diego.

Asincronía en Js= Es delegar alginas tareas para que las ejecute el navegador y una vez terminadas entra en otra estructura llamada Callback.

aaaaa ya entendi

entendido 100%

Para los amigos de Ecuador, podría servir el siguiente ejemplo:

console.log('bolon 1');
console.log('bolon 2');
setTimeout(() => {
    console.log('encebollado');
},500);
setTimeout(() => {
    console.log('humita con cafe :3');
},0);
console.log('bolon 3');
console.log('bolon 4');

El asincronismo en JS es decirle al navegador que le apoye :p

Muchas gracias, estoy tan agradecido con Diego por todo lo que me ha ayudado!!!
Excelente profesor