Cómo funciona el asincronismo en JavaScript

Clase 30 de 55 • Fundamentos de JavaScript 2018

Resumen

JavaScript sólo puede hacer una cosa a la vez, sin embargo; es capaz de delegar la ejecución de ciertas funciones a otros procesos. Este modelo de concurrencia se llama EventLoop.

JavaScript delega en el navegador ciertas tareas y les asocia funciones que deberán ser ejecutadas al ser completadas. Estas funciones se llaman callbacks, y una vez que el navegador ha regresado con la respuesta, el callback asociado pasa a la cola de tareas para ser ejecutado una vez que JavaScript haya terminado todas las instrucciones que están en la pila de ejecución.

Si se acumulan funciones en la cola de tareas y JavaScript se encuentra ejecutando procesos muy pesados, el EventLoop quedará bloqueado y esas funciones pudieran tardar demasiado en ejecutarse.

Cristian Bello Cervantes

student•

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

Wandy Rafael Santana Evangelista

student•

Espero que ese codigo lo coloquemos en el cerebro, no en el navegador. xd

Seba Cardoso

student•

Por curioso lo ejecuté y tuve que matar el proceso. El navegador ni siquiera podía procesar el evento close. 😃

Juan Manuel Alberto Martin

student•

Les paso un video que me sirvio para cerrar la idea del EventLoop. Tal vez le sirva 😃

Event loop

Pablo Andres

student•

Excelente, gracias.
Agrego el link de la herramienta para ver el orden de ejecución de js si alguna vez llegamos a necesitarlo:

http://latentflip.com/loupe/

Carlos Junior Guzman Rodriguez

student•

Gracias por el aporte

María José Ledesma

student•

Diblaim Gamaliel Loera Gonzalez

student•

excelentes notas

Never Andrés Aparicio Hernandéz

student•

me voy a robar tu imagen con permiso....

Daniel Páez

student•

/* IDEAS CLAVES

Javascript solo puede hacer una cosa a la vez independiente de la potencia de tu computador.

¿Cómo funciona la máquina del asincronismo en javascript?

javascript Puede delegar la ejecucion de ciertas funciones a otros procesos
1.1 Este es el modelo de concurrencia event loop
Javascript tiene una pila de ejecucion (como si fuera un estante con notas de pedidos, se acumula).
2.1 Cuando termina una función en la pila de ejecución (cuando se despacha del pedido) la saca de la pila (el estante) y la bota.
calllback es una funcion que se ejecutará cuando regrese la respuesta del servidor u otra función.
3.1 Mientras existe un callback javascript sigue despachando otros pedidos (ejecutando el codigo principal).
3.2 Cuando llega la respuesta (lo que se necesitaba para el pedido) js lo mete en la cola de tareas (area de despacho) (peticiones a servidor, interacccion visual, eventos programados)

4.En la cola de tareas javascripta encola funciones (pedidos) según van llegando
4.1 Solo cuando se quede sin programas en la pila de ejecución (estante con notas de pedidos) es que va a la cola de tareas (zona de despacho)

Por lo tanto

=> EVITA CUELLOS DE BOTELLA EN LA PILA DE EJECUCIÒN
=> No voy a bloquear el event loop

Carlos Junior Guzman Rodriguez

student•

gracias por el aviso!!!

Daniel Páez

student•

Avisado estamos @KarlxS

Daniel Cabrera Ramirez

student•

esta analogía me pareció muy buena para entender aun mas el asincronismo de JS: Imagina que te levantas una mañana a preparar tu desayuno. Primero decides tostar tu pan y luego prepararás tu avena. Si fuera una persona síncrona (Blocking) tendrías que esperar a tostar tu pan para recíen preparar tu avena. Pero si fuera una persona asíncrona (Non Blocking) luego de poner a tostar tu pan, vas preparando tu avena. La acción de que salga tu pan de la tostadora sería un callback que está esperando que finalice el proceso para ejecutarse. Pero otros procesos (como preparar tu avena) ya podrían irse realizando.

Segundo Juan

student•

genio

Ulises Antonio Sámano Galván

student•

JS solo puede ejecutar una tarea a la vez, pero puede delegar tareas a otros procesos. Esto es llamado Event Loop
Call stack: Es donde JS va poniendo las llamadas a funciones según el orden de ejecución del programa, cuando termina de realizar una función la "elimina" del call stack.
Call back :Es cuando JS le encarga al navegador una tarea, que en el momento que se realice esa tarea se va a llamar a una función. Mientras tanto JS sigue ejecutando el programa principal. Cuando el navegador finaliza la tarea y manda a llamar la función, esa función se va a:
Cola de tareas: Aquí las funciones se van a ordenar según el orden en que van llegando.
Finalmente cuando el programa principal se quede sin funciones que ejecutar , va a ejecutar las que están en la cola de tareas.

Carlos Roberto Villatoro Barrios

student•

Me gusta mucho como explicas en tu canal de YouTube "La cocina del código".

Dejo el link para que lo visiten: https://www.youtube.com/watch?v=ygA5U7Wgsg8

Sergio Armando Medina Chaparro

student•

¡Que carajos! 🤩No sabía que el Profe tenía su propio canal. ¡Muchas gracias por el aporte Carlos! La verdad me encanta este profe. 👏👏

¿Alguien sabe si él da otros cursos en Platzi? 😬

den velez

student•

gracias carlos! que bueno que compartes el link saludos!

David Gallego

student•

Victor Andres Castillo Zambrano

student•

jejejejjee

Natalia Jaramillo González

student•

José Alejandro Muñoz Ruiz

student•

Gracias por este resumen!!

Gino Ureta

student•

Genial, podrias hacer un libro usando este formato

Joaquin Fuentes

student•

Vides Gregorio Ricardo

student•

Mas claro imposible, gracias por el grafico

Gino Ureta

student•

gracias por el aporte

Alejandro Silva Berbesi

student•

Hola muchachos

Este video está buenísimo para complementar el tema de la pila de ejecución en JS. Y es con el mismo profe Sacha Lifszyc

https://youtu.be/ygA5U7Wgsg8

Jonathan Jiménez Soveranes

student•

Muy bueno!

Andyno Cortez

student•

yo: No voy a bloquear el Event Loop mi codigo - El lunes sin falta krnal

Enrique Devars

teacher•

Jajajajajaja 😂

Andyno Cortez

student•

Diego Fernando Rojas Quintero

student•

Event loop: JavaScript puede delegar la ejecución de ciertas funciones a otros procesos, debido a que JS solo puede hacer una sola tarea a la vez.

CallStack : también nombradas como pilas de llamadas, almacena la información sobre el codigo que aun esta listo (creado por el programador) para ser ejecutadas en javaScript.

Callback: Es una devolución de llamada, es decir, una función que se ejecuta cuando llegue la respuesta de un servidor a JS. Por ejemplo: ¿que procesos quieres hacer cuando los datos de tu servidor hayan llegado?

++Nota++: si el CallStack no ha terminado de ser ejecutado es posible que los Callbacks se almacenen en una pila de tareas, y las funciones que tienen los callbacks seran ejecutadas cuando todo el codigo del CallStack seS ejecutada. NO BLOQUEES EL EVENT LOOP

Manuel Salv. Lemos Foncubierta

student•

Ya entiendo porqué JS fue tan odiado, no tiene un buen POO, tampoco es multitarea…

Oscar Stevens Cuartas Bejarano

student•

siempre me ha parecido genial… psss toca usarlo pa lo que se pueda

leonardo Oteca

student•

Les dejo esta sesión en vivo de Julian duque sobre el event loop Desmitificando el event loop

Jehaann Manzanares

student•

/* *********************************

COMO FUNCIONA EL ASINCRONISMOS EN JS

************************************/
/*
    Solo ejecuta una tarea a la vez

    Js puede delegar tareas - Event Loop

    Pila de ejecucion o callStack
        -Que peticiones viene a parar aqui
                    - peticiones a servidores
                    - interacciones visuales
                    - Navegacion *
     / donde se ponen las llamadas a funciones 
        / cuando termina de ejecutar una funciona la saca de la pila y la eminina
    Callback - function que js ejecutare cuando regrese la respuesta del servidor
        /cunado regresa la respuesta se va al callStack
        se va a ejecutar hasta que el programa se quede sin funciones en
        la pila de ejecucion

        CUIDADO : NO GENERAR UN CUELLO DE BOTELLA EN LA PILA DE EJECUCION

        REPITE TODAS LAS NOCHES: NO VOY A BLOQUEAR EL EVENT LOOP

    
    
            

*/

Jose Funez

student•

if(antesDeDormir){
	while(!dormido){
		console.log("NO voy a Bloquear el EventLoop")
	}
}

Emerson Cedeño

student•

adiós ovejas! 🐑🐑🐑

Jose L. Figueroa

student•

En** JS solamente se puede hacer una cosa a la vez**, no importando el equipo ni los procesadores con los que cuentes.

Aunque JS no es multitarea, JS puede derogar la ejecución de ciertas funciones a otros procesos. A esto se le llama Eventloop.

JS tiene algo que se llama** Callstack o Pila de Ejecución**, donde coloca las llamadas a funciones según el orden de ejecución de nuestro programa, si la función principal llama a otra, ésta se agrega a la pila, y cuando ésta termina de ejecutarse la saca de la pila.

Un **Callback **es una función que JS ejecutará cuando regrese la respuesta del servidor, mientras esto sucede la función principal continua siendo ejecutada, al llegar la respuesta, esta se coloca en la Cola de Tareas, donde se encolan según el orden en que van llegando.

A la** Cola de Tareas** llegan:

Peticiones a servers.
Interacciones visuales.
Navegación client-side. -Eventos que se realizan cada cierto tiempo.

Cuando el programa se queda sin funciones va a buscar las funciones de la cola de tareas. Por ello** es importante no generar un Cuello de Botella en la Pila de Ejecución**, ya que si JS se queda ejecutando funciones muy pesadas, las funciones de la Cola de Tareas tardarán mucho en ejecutarse.