asincronía Event loop

@serverSerrverlesskiy

asincronía

En JavaScript, la asincronía es la herramienta principal que procesa las solicitudes en paralelo con la carga de una página web. Ahora es imposible imaginar Internet, donde todas las solicitudes al servidor se enviarían con una recarga de página.

Cualquier dato del servidor se solicita de forma asíncrona: se envía una solicitud (XMLHttpRequest o XHR), y el código no espera su devolución, continuando su ejecución. Cuando el servidor responde, se notifica al objeto XHR y se activa la función de callback que se le pasó antes de enviar la solicitud.

Si usa las herramientas de lenguaje correctamente, entonces la ejecución de una solicitud que ocurre secuencialmente y en un hilo no interfiere con la recepción de eventos y la reacción a ellos de ninguna manera: una persona trabaja tranquilamente con la interfaz, sin notar retrasos, bloqueos y se congela

Video

Event loop

Queue

Event loop en JavaScript es un administrador de llamadas asíncrono.

Para que este complicado proceso funcione sin problemas, JavaScript implementa un mecanismo para controlar el orden de ejecución del código. Dado que este es un lenguaje de subproceso único , era necesario "encajar" en el contexto de ejecución actual. Este mecanismo se llama event loop - un ciclo de eventos.

Del inglés loop se traduce como "bucle", lo que refleja perfectamente el significado: estamos tratando con una cola en bucle.

Event loop regula la secuencia de ejecución de contextos - la pila. Se genera cuando se dispara un evento o se llama a una función⚙️. La reacción al evento se coloca en la cola de ejecución, en el event loop, que secuencialmente, con cada ciclo, ejecuta el código que ingresa. En este caso, la función vinculada al evento⚙️ se llama después del contexto de ejecución actual.

En JavaScript, las colas de ejecución sincrónicas y asincrónicas se ejecutan constantemente. Synchronous - stack - forma una cola y reenvía a asíncrono - event loop - llamadas de función⚙️ que se ejecutarán después del contexto ejecutable programado actual.

Para que los datos estén en un estado consistente, cada función⚙️ debe ejecutarse hasta el final. Esto se debe al subproceso único de JavaScript y algunas otras características, como los cierres que son característicos de los lenguajes de programación funcionales. Por lo tanto, el único hilo se representa como una cola de contextos de ejecución, en la que tiene lugar el “cuñado” de funciones⚙️ que han pasado por el bucle de eventos.

Descripción

JavaScript es un lenguaje de subproceso único: solo se puede ejecutar una tarea a la vez. Normalmente esto no es difícil, pero ahora imagina que estás ejecutando una tarea que toma 30 segundos... Sí. Durante esta tarea, esperamos 30 segundos antes de que ocurra algo más (JavaScript se ejecuta en el hilo principal del navegador de forma predeterminada, por lo que toda la interfaz de usuario esperará) Es 2021, nadie quiere un sitio lento que sea tonto.

Afortunadamente, el navegador nos proporciona una funcionalidad que el propio motor de JavaScript no proporciona: la Web API. Que incluye DOM API, setTimeout, solicitudes HTTP, etc. Esto puede ayudarnos a crear un comportamiento asíncrono sin bloqueo .

Cuando llamamos a una función, se agrega a la pila de llamadas. La pila de llamadas es parte del motor JS, es independiente del navegador. Esta es la vista clásica de la pila, es decir, "primero en entrar", "último en salir". Cuando una función devuelve un valor, se "saca" de la pila.

function great() {
  return 'Hello'
}

function respond() {
  return setTimeout(() => alert('Hey!'), 1000)
}

great()
respond()

stack

La función respond devuelve la función setTimeout. SetTimeout se nos proporciona a través de Web-API: nos permite dividir tareas sin bloquear el hilo principal. La función Callback que pasamos a la función setTimeout, la función lambda () => {return 'Hey'} se agrega a Web-API. Mientras tanto, setTimeout y responde se extraen de la pila y devuelven sus valores.

timer

En Web-API, el temporizador se ejecuta hasta que el segundo argumento que le pasamos espera 1000 ms. Callback no se agrega inmediatamente a la pila de llamadas, sino que se pasa a algo llamado cola.

queue

Esto puede ser confuso: ¡no significa que la función de devolución de llamada se agregue a la pila de llamadas (devolviendo así un valor) después de 1000 ms! Simplemente se agrega a la cola después de 1000 ms. Pero en esta cola, la función debe esperar hasta que llegue su turno.

Ahora bien, esta es la parte que todos hemos estado esperando... Es hora de que el event loop haga una sola tarea: ¡conectar la cola a la pila de llamadas! Si la pila de llamadas está vacía, es decir, si todas las funciones llamadas anteriormente han devuelto sus valores y se han extraído de la pila, el primer elemento de la cola se agrega a la pila de llamadas. En este caso, no se llamó a ninguna otra función, lo que significa que la pila de llamadas estaba vacía cuando la función callback fue el primer elemento de la cola.

qtoc

callback se agrega a la pila de llamadas, se llama y se devuelve, y se extrae de la pila.

resultado

Es divertido de ver, pero no puedes entender completamente un tema sin trabajar con él una y otra vez. Intente averiguar qué aparecerá en la consola si ejecutamos lo siguiente:

const foo = () => console.log('First')
const bar = () => setTimeout(() => console.log('Second'), 500)
const baz = () => console.log('Third')

bar()
foo()
baz()

Veamos qué sucede cuando ejecutamos este código en el navegador:

Llamamos a bar que devuelve la función setTimeout. La Callback que pasamos a setTimeout se agrega a Web API, la función setTimeout y la bar se extraen de la pila de llamadas.

El temporizador se inicia, mientras tanto se llama a foo y se registra First. foo devuelve undefined, se llama a baz y se agrega callback a la cola baz registra Third. El ciclo de eventos ve que la pila de llamadas está vacía después de que regresa baz, después de lo cual la devolución de llamada se agrega a la pila de llamadas. Callback registra Second.

¡Espero que esto te haga sentir más seguro con el event loop!

No se preocupe si esto todavía le parece confuso, lo más importante es comprender de dónde pueden provenir ciertos errores o comportamientos específicos.

¿Problemas?

Problema

Escribe en Discord o Telegram chat y suscríbete a nuestras noticias

Preguntas:

Pregunta

La asincronía es:

Una herramienta que muestra el contexto de ejecución de una función desde un hilo síncrono
Una herramienta que ejecuta código línea por línea
Una herramienta que procesa solicitudes en paralelo con la carga de la página web

Administrador de llamadas asíncronas:

stack
Event loop
Objetos de clase superior

Una herramienta que ejecuta código con un retraso de milisegundos:

delay
heap
setTimeout

Para comprender cuánto ha aprendido esta lección, realice una prueba en la aplicación móvil de nuestra escuela sobre este tema o en nuestro bot de Telegram.

Campamento JS