Cómo esperar o dormir la ejecución del código en JavaScript
Por ejemplo, si necesitamos registrar tres mensajes en la consola con un retraso de un segundo, no podemos hacerlo usando la función de sueño en JavaScript, ya que no está disponible. Pero podemos trabajar alrededor de esto usando el setTimeout () función.
¿Cuál es el método setTimeout ()??
El setTimeout () El método se utiliza para establecer un temporizador para retrasar la ejecución del código. Ejecuta la pieza de código especificada después de que expira el temporizador.
Muchos desarrolladores que han trabajado con el dormir() FUNCIÓN FUNCIONA FUNDAR setTimeout () ser confuso. Esto es porque confunden el setTimeout () funcionar para ser una versión del dormir() función en JavaScript.
Desafortunadamente, el setTimeout () tiene sus propias reglas y no funciona como el dormir() La función lo hace, los desarrolladores de JavaScript tienen que encontrar soluciones ingeniosas para que funcione como un dormir() función.
En esta guía, veremos varias de esas soluciones y explicaremos cómo podemos usar el setTimeout () función para pausar la ejecución del código fuente de JavaScript y esperar entre líneas de código consecutivas.
A diferencia del dormir() función, si solo ponemos un retraso de un segundo usando el setTimeout () Método Entre las líneas del código JavaScript, no funciona:
SetTimeOut (1000)consola.log ("Mostrar después de un segundo")
SetTimeOut (1000)
consola.log ("Mostrar después de otro un segundo")
El código en el ejemplo anterior se ejecutará sin ningún retraso como si el setTimeout () la función no existe.
El problema con el código dado anteriormente es que el setTimeout () El método solo retrasa la ejecución de la función que se le pasa como una función de devolución de llamada. Sin embargo, solo dimos uno "demora"Argumento cuando se supone que tiene dos argumentos diferentes. Se supone que el primer argumento es una función de devolución de llamada, y se supone que el segundo argumento es el "demora". Ahora intentemos hacer eso y veamos qué pasa:
setTimeout (() => Consola.Log ("Mostrar después de un segundo"), 1000)setTimeout (() => Consola.Log ("Mostrar después de otro segundo"), 1000)
Esta vez el setTimeout () La función funcionará pero no como se supone que debe hacerlo, ya que ambos mensajes de registro de consola se mostrarán al mismo tiempo en lugar de tener un retraso de 1000 milisegundos entre ellos.
Entonces, ¿por qué falló setTimeout ()??
La razón por la cual setTimeout () falla en el ejemplo anterior es que el setTimeout () La función misma funciona sincrónicamente en el código JavaScript, pero la función de devolución de llamada dentro de la función setTimeOut () crea una nueva entrada en la cola de tareas asincrónicas que se ejecuta después del tiempo especificado.
Desde el tiempo especificado en ambos setTimeout () La función era la misma y se ejecutaron al mismo tiempo debido a la ejecución del código síncrono si JavaScript (con un retraso de solo unos pocos milisegundos), todas las entradas en la cola de tareas asíncronas se ejecutan simultáneamente.
Como se puede ver, setTimeout () no es una copia exacta del dormir() función, más bien solo hace cola el código para la ejecución posterior. Entonces surge la pregunta, ¿cómo hacemos que funcione como un dormir() función. Podemos hacer esto utilizando tiempos tiempos aumentados al llamar al setTimeout () función:
setTimeout (() => Consola.Log ("Mostrar después de un segundo"), 1000)setTimeout (() => Consola.Log ("Mostrar después de otro segundo"), 2000)
Esto funciona porque la nueva entrada en la cola se crea aproximadamente al mismo tiempo, pero esas entradas tienen que esperar diferentes cantidades de tiempo para ser ejecutadas.
El método dado anteriormente es el método que se utiliza para retrasar la ejecución de algunas partes del código mientras que las otras partes se ejecutan sincrónicamente. Sin embargo, si desea detener la ejecución de todo el código de JavaScript mientras ejecuta de forma asincrónica otras partes, deberá crear una personalización dormir() función.
Cómo escribir una función de sueño
En JavaScript, podemos crear una personalización dormir() función utilizando promesas, asíncrono y espera. Esto funciona exactamente como un dormir() la función lo haría en cualquier otro idioma.
Sin embargo, esta costumbre dormir() La función debe usarse con la palabra clave de espera y debe llamarse desde las funciones de async.
var sleep = (demora) => new Promise ((resolve) => setTimeOut (resolve, demora))var repetirmessage = async () =>
esperar el sueño (1000)
consola.log ("Mostrar después de un segundo")
esperar el sueño (1000)
consola.log ("Mostrar después de otro un segundo")
repetirmessage ();
Ahora, al usar este método de sueño de compilación personalizado, puede detener la ejecución del código JavaScript para la cantidad de tiempo deseada.
Conclusión
JavaScript no tiene el dormir() La función de forma predeterminada retrasa la ejecución del código, pero su naturaleza asíncrona se puede usar para lograr la misma tarea. El incorporado setTimeout () El método se puede usar para retrasar la ejecución del código, pero para que el código realmente sea asíncrono en JavaScript y haga que funcione como el dormir() Función necesitamos utilizar las funciones de promesas, esperanza y asíncrono. En este artículo, aprendimos a crear personalizados dormir() Funciones en JavaScript.