Reimpresión: enlace original
¿Qué es un bucle de eventos?
Comenzamos con una afirmación extraña: mientras que el código JavaScript asíncrono (como setTimeout me) está permitido, JavaScript en sí mismo nunca tuvo un concepto directo de asíncrono incorporado hasta ES6. El motor de JavaScript nunca hace nada más que ejecutar un solo bloque del programa en un momento dado.
Entonces, ¿quién le dice al motor JS que ejecute su bloque? De hecho, el motor JS no se ejecuta de forma aislada, sino en un entorno alojado, que para la mayoría de los desarrolladores es un navegador web típico o Node.js. De hecho, hoy en día, JavaScript está integrado en todo, desde robots hasta bombillas. Cada dispositivo individual representa un tipo diferente de entorno de alojamiento para JS Engine.
Común en todos los entornos es un mecanismo incorporado llamado bucle de eventos que maneja la ejecución de múltiples bloques en un programa cada vez que se llama a JS Engine.
Esto significa que un motor JS es solo un entorno de ejecución bajo demanda para cualquier código JS arbitrario. El tiempo para programar el evento (ejecución de código JS) es el entorno circundante.
Entonces, por ejemplo, cuando su programa JavaScript realiza una solicitud Ajax para obtener algunos datos del servidor, configura el código de "respuesta" ("devolución de llamada") en la función, y el motor JS le dice al entorno de alojamiento: "Oye, yo Por ahora estoy pausando la ejecución, pero tan pronto como complete esa solicitud de red y tenga algunos datos, vuelva a llamar a esta función".
Luego, el navegador se configura para escuchar las respuestas de la red y programará una función de devolución de llamada para ejecutarla insertándola en el ciclo de eventos cuando se le deba devolver algo. Miremos la imagen de abajo:
¿Qué son estas API web? Esencialmente, son subprocesos a los que no tiene acceso y puede llamarlos. Son parte del navegador que inicia la concurrencia. Si es un desarrollador de Node.js, estas son las API de C++.
Entonces, ¿qué es exactamente un bucle de eventos?
El bucle de eventos tiene un trabajo simple: escuchar la pila de llamadas y la cola de devolución de llamadas. Si la pila de llamadas está vacía, el bucle de eventos tomará el primer evento de la cola y lo empujará a la pila de llamadas, ejecutando efectivamente el evento. Tales iteraciones se denominan tics en el ciclo de eventos y cada evento es solo una función de devolución de llamada.
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
复制代码Vamos a "ejecutar" este código y ver qué sucede:
- El estado es claro. La consola del navegador se borra y la pila de llamadas está vacía.
- console.log('Hola') se agrega a la pila de llamadas
- Se ejecuta console.log('Hola').
- console.log('Hola') se elimina de la pila de llamadas.
- setTimeout(function cb1() { ... }) se agrega a la pila de llamadas.
- setTimeout(función cb1() { ... }) se ejecuta. El navegador creará el temporizador como parte de la API web. Se encarga de la cuenta atrás para usted.
- setTimeout(function cb1() { ... }) se completó y se eliminó de la pila de llamadas.
- console.log('Bye') se agrega a la pila de llamadas.
- se ejecuta console.log('Adiós').
- console.log('Bye') se elimina de la pila de llamadas.
- Después de al menos 5000 ms, el temporizador finaliza y empuja la devolución de llamada cb1 a la "Cola de devolución de llamada".
- El bucle de eventos cb1 se obtiene de la cola de devolución de llamadas y lo empuja a la pila de llamadas.
- cb1 ejecuta y agrega console.log('cb1') a la pila de llamadas.
- se ejecuta console.log('cb1').
- console.log('cb1') se elimina de la pila de llamadas.
- cb1 se elimina de la pila de llamadas.
Resumen rápido:
Curiosamente, ES6 especifica cómo funciona el bucle de eventos, lo que significa que técnicamente está bajo el control del motor JS, que ya no actúa solo como un entorno de alojamiento. Una de las principales razones de este cambio fue la introducción de Promises en ES6, ya que este último requería acceso a un control directo y detallado sobre las operaciones de programación en la cola del bucle de eventos (que analizaremos en detalle más adelante).
Cómo funciona setTimeout(...)
Es importante tener en cuenta que setTimeout(...) no coloca automáticamente la devolución de llamada en la cola del bucle de eventos. Establece un temporizador. Cuando el temporizador expire, el entorno colocará su devolución de llamada en el bucle de eventos para que algún tick futuro lo recoja y lo ejecute. Echa un vistazo a este código:
setTimeout(myCallback, 1000);
No significa que myCallback se ejecutará en 1000 ms, pero myCallback lo agregará a la cola del bucle de eventos en 1000 ms. Sin embargo, puede haber otros eventos agregados anteriormente en la cola: sus devoluciones de llamada tendrán que esperar.
Vea el código a continuación:
setTimeout(function() {
console.log('callback');
}, 0);
console.log('Bye');
复制代码Aunque el tiempo de espera se establece en 0ms, el resultado en la consola del navegador será el siguiente:
Hi
Bye
callback
复制代码