JavaScript es el lenguaje de la web. Y no ha sido lo mismo desde que se lanzó ES5. Cada vez más ideas y características se están portando desde diferentes lenguajes y se están integrando en JavaScript.
Una de esas características son las promesas, que son probablemente la característica más utilizada en JavaScript después del lanzamiento de ES5.
Pero una de las cosas que JavaScript pierde es una forma de "pausar" la ejecución por un tiempo y reanudarla más tarde. En esta publicación, discutiré cómo puede lograrlo y lo que realmente significa "pausar" o "dormir" en JavaScript.
Spoiler: JavaScript nunca se "detiene" realmente.
TL; DR
Aquí está el código de pasta de copia que hace el trabajo:
/** * * @param duration Enter duration in seconds */ function sleep(duration) { return new Promise(resolve => { setTimeout(() => { resolve() }, duration * 1000) }) }Pero, ¿qué está pasando realmente aquí?
setTimeout y promesas falsas
Veamos un ejemplo rápido usando el fragmento anterior (discutiremos lo que sucede en él más adelante):
async function performBatchActions() { // perform an API call await performAPIRequest() // sleep for 5 seconds await sleep(5) // perform an API call again await performAPIRequest() }Esta función performBatchActions, cuando se llama, simplemente ejecuta la performAPIRequestfunción, espera unos 5 segundos y luego vuelve a llamar a la misma función. Tenga en cuenta cómo escribí unos 5 segundos , y no 5 segundos.
Una nota fuerte para publicar: el código anterior no garantiza un sueño perfecto. Significa que si especifica que la duración sea, digamos, 1 segundo, JavaScript no garantiza que comenzará a ejecutar el código después de la suspensión exactamente después de 1 segundo.
Por qué no? Tu puedes preguntar. Desafortunadamente, es porque los temporizadores funcionan en JavaScript y, en general, en bucles de eventos. Sin embargo, JavaScript garantiza absolutamente que el fragmento de código después de la suspensión nunca se ejecutará antes del tiempo especificado.
Así que realmente no tenemos una situación completamente indeterminada, solo una parcial. Y en la mayoría de los casos está dentro de un margen de solo unos pocos milisegundos.
JavaScript es de un solo subproceso
Un solo hilo significa que un proceso de JavaScript realmente no puede salir del camino en absoluto. Tiene que hacer todas las cosas, desde detectores de eventos hasta devoluciones de llamada HTTP, en el mismo hilo principal. Y cuando una cosa se está ejecutando, otra no se puede ejecutar.
Considere una página web en la que tiene varios botones y ejecuta el código anterior para simular un sueño durante, digamos, 10 segundos. ¿Qué esperas que pase?
Nada en absoluto. Su página web funcionará bien, sus botones responderán y, una vez que finalice la suspensión de 10 segundos, se ejecutará el código al lado. Entonces, es evidente que JavaScript no bloquea realmente todo el hilo principal porque si lo hiciera, su página web se habría congelado y los botones no se habrían hecho clic.
Entonces, ¿cómo hizo JavaScript realmente pausar un solo hilo, sin realmente pausarlo?
Conoce el bucle de eventos
A diferencia de otros lenguajes, JavaScript no solo sigue ejecutando código de forma lineal de arriba a abajo. Es un lenguaje impulsado por eventos asincrónico con toneladas de magia en forma de bucle de eventos.
Un bucle de eventos divide su código en eventos sincrónicos y determinados, como temporizadores y solicitudes HTTP. Hablando con precisión, hay dos colas: una cola de tareas y una cola de microtask.
Siempre que ejecuta JS y hay algo asincrónico (como un evento de clic del mouse o una promesa), JavaScript lo lanza a la cola de tareas (o cola de microtask) y sigue ejecutándose. Cuando completa una "marca única", comprueba si las colas de tareas y la cola de microtask tienen algo de trabajo. Si es así, ejecutará la devolución de llamada / realizará una acción.
Realmente recomendaría a cualquier persona interesada en el funcionamiento detallado de los bucles de eventos que vea este video:
Conclusión
Viniste aquí para recibir una instrucción de sueño simple en JavaScript y terminaste aprendiendo sobre una de las cosas principales en JavaScript: ¡bucles de eventos! Increíble, ¿no?
Bueno, si te gustó el artículo, echa un vistazo a codedamn, una plataforma que he estado construyendo para desarrolladores y estudiantes como tú. Además, conectemos en las redes sociales: Twitter e Instagram. ¡Te veo pronto!
Paz