Bucles de eventos en JavaScript | Explicado con ejemplos
El contexto de ejecución global mantiene una pila de todas las funciones que se ejecutan, funciona en el comportamiento "último en entrar primero en salir". Mientras que el entorno de la API web recoge las funciones que forman parte de la API web (API llamadas, AJAX Call, setTimeOut () y más) de la pila de ejecución y comienza a ejecutarlas en su propio entorno. Esto, a su vez, permite que la pila de ejecución funcione en otra cosa, implementando así un comportamiento asíncrono.
Cuando la API web termina de ejecutar en la función, coloca el resultado en la cola de eventos. Cada vez que la pila de ejecución está vacía, el bucle de eventos recoge la función en la cola de eventos y la vuelve a colocar en la pila de ejecución. Todo este círculo se conoce como el Bucles de eventos en JavaScript.
Prueba este simple código secuencial:
función f2 ()consola.log ("función interior f2");
consola.log ("F2 ha terminado");
función f1 ()
consola.log ("Función interna F1");
f2 ();
consola.log ("finalización de la función f1");
f1 ();
La salida de este código es como
Este código se ve así en la pila de ejecución:
La pila funciona en este orden:
- Los consejos entran F1, y ejecuta el comando para imprimir "Función interna F1" y lo elimina de la pila
- Pointer ve la línea F2 () y entra en el f2
- El puntero ejecuta "Función interna F2" y lo elimina de la pila
- Imprime las líneas "F2 ha terminado de funcionar" y lo elimina de la pila
- Desde f2 está hecho, eliminó el "F2 (); " desde la pila y vuelve a F1 para ejecutar la parte restante del F1 función
- Imprime la línea "Final de la función F1" y la elimina de la pila
- Dado que no queda ningún comando en F1 (), El puntero también lo elimina de la pila.
Ahora, que sabe cómo funciona la pila de ejecución, puede pasar a un ejemplo de código async probando las siguientes líneas de código:
función f2 ()consola.log ("función interior f2");
setTimeOut (() =>
consola.log ("F2 ha terminado");
, 3000);
función f1 ()
consola.log ("Función interna F1");
f2 ();
consola.log ("finalización de la función f1");
f1 ();
Como puede ver, en función F2 () Ahora estamos haciendo una tarea que tarda 3 segundos en terminar. Cuando el puntero llega a esto setTimeout () Declaración, lo coloca dentro del entorno de API web y lo elimina de la pila de ejecución.
La pila de ejecución seguirá trabajando en la otra parte del código mientras la API web esperará el setTimeout () Para terminar como:
Después de este setTimeout () La instrucción se ha trasladado al entorno de la API web, la pila de ejecución se verá así:
Como puede ver, mientras la API web está trabajando en la función SetTimeOut, la pila de ejecución está trabajando en otras instrucciones y eliminándolas de la pila. Cuando la API web termina de trabajar en el "setTimeout ()"Lo moverá a la cola de eventos, mientras que el evento se espera que la pila de ejecución se vacíe.
Cuando la pila está vacía, el bucle de eventos moverá el settimeut resultar en la pila de ejecución como:
Y luego:
Así es como funciona el bucle de eventos, es por eso que obtiene la siguiente salida en su consola:
Con la salida anterior, puede verificar la ejecución del bucle de eventos
Conclusión
El bucle de eventos es una función que mueve las instrucciones que esperan ser ejecutadas en la pila de ejecución global desde la cola de eventos. Siempre que una función como setTimeout () debe ejecutarse simultáneamente, se mueve de la pila de ejecución al entorno de la API web. La API web funciona en la instrucción mientras el JavaScript continúa ejecutando otras partes del código, una vez que la API web se termina de trabajar en la instrucción, coloca la instrucción o función en la cola de eventos desde donde se mueve a la pila de ejecución cada vez que el la pila está vacía. Todo esto ciclo se conoce como el Bucle de eventos.