Cómo utilizar el equivalente de JavaScript de suspensión, espera, retraso y pausa

JavaScript es el lenguaje de la web. JS no ha sido el mismo desde que se lanzó ES5. Más y 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 es Promises, que es probablemente la cosa más utilizada en JavaScript después del lanzamiento de ES5.

Pero una de las cosas que JavaScript pierde es la 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 copy-pasta que haría el trabajo:

Pero, ¿qué está pasando realmente aquí?

setTimeout y las promesas falsas

Veamos un ejemplo rápido con el fragmento anterior (analizaremos lo que sucede en él más adelante).

Esta función /** * * @param duration Enter duration in seconds */ function sleep(duration) { return new Promise(resolve => { setTimeout(() => { resolve() }, duration * 1000) }) } , cuando se llama, simplemente ejecutará async function performBatchActions() { // perform an API call await performAPIRequest() // sleep for 5 seconds await sleep(5) // perform an API call again await performAPIRequest() } función, espera unos 5 segundos y, a continuación, vuelva a llamar a la misma función. Note como escribí unos 5 segundos y no 5 segundos.

Una nota fuerte para poner aquí, el código anterior no garantiza un sueño perfecto. Significa que si especificas que la duración sea, digamos 1 segundo, JavaScript no garantiza que comenzaría a ejecutar el código después de la suspensión exactamente después de 1 segundo. ¿Por qué? Tu puedes preguntar. Desafortunadamente, eso se debe a que los temporizadores funcionan en JavaScript y, en general, en bucle de eventos. Sin embargo, JavaScript garantiza absolutamente que el fragmento de código después de la suspensión nunca se ejecutará antes de dicho tiempo, por lo que realmente no tenemos una situación indeterminada completa, solo una parcial, y en la mayoría de los casos, dentro de un margen de solo unos pocos milisegundos.

JavaScript es de un solo subproceso

Un solo hilo significa que el 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ía bien, sus botones responderían y, una vez que finalice la suspensión de 10 segundos, se ejecutará el código al lado. Por lo tanto, es evidente que JavaScript no bloqueó realmente todo el hilo principal porque si lo hiciera, su página web debería haberse congelado y los botones no deberían haberse 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 se limita a seguir 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. El 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: cola de tareas y 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 sola marca, 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 trabajo profundo del bucle 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: ¡el ciclo de eventos! Increíble, ¿no?

Publicado originalmente por Mehul Mohan en https://www.freecodecamp.org

#javascript # desarrollo web