Cómo retrasar/esperar en la ejecución del código de JavaScript?

Las funciones que pueden retrasar o detener la ejecución de un trozo de código son muy cruciales en un lenguaje de programación, ya que son una forma de controlar el flujo del programa. Hay muchos incorporados "demora" o "esperar"Funciones disponibles en la mayoría de los lenguajes de programación. Pero en JavaScript, no hay demora, espera o función de sueño porque es un lenguaje de secuencias de comandos y los idiomas de secuencias.

Inicialmente, puede no parecer un gran problema, pero a medida que avanza en el mundo de la programación, se dará cuenta de la importancia de las funciones de "retraso" y "esperar". Por lo tanto, si no hay función de espera \ retraso \ dormir, entonces no hay forma de controlar la ejecución de un programa en JavaScript? Bueno, existen diferentes funciones y métodos que nos ayudan a lograr la misma tarea en JavaScript.

Uso de la función setTimeOut ()

El primer y el método más común para implementar un retraso en la ejecución de un código JavaScript es usar el setTimeout () método. Hará un error muy común de asumir que la sintaxis es:

setTimeOut (retraso en MS);

Mientras que en realidad, este método toma una función de devolución de llamada. Teniendo eso en cuenta, podemos mirar la sintaxis como:

Sintaxis de la función setTimeOut ()

setTimeOut (función, retraso en MS);

Para comprender mejor el funcionamiento del setTimeout () Método, intentemos resolver un problema.

Ejemplo
Supongamos que queremos imprimir números del 1 al 10, con un retraso de 1 segundo entre cada número.

La forma tradicional sería:

para (deja i = 1; yo <=10 ; i++ )
setTimeOut (1000);
consola.log (i);

La salida del código imprime instantáneamente los 10 dígitos como:

Porque no estamos pasando nada al método setTimeOut ().

Para agregar el retraso usando el método setTimeOut (), creemos que la forma correcta es:

para (deja i = 1; console.log (i), 1000);

En lugar de obtener un retraso de 1 segundo después de cada número, lo que obtenemos es un retraso de 1 segundo en el inicio y luego todos los números se imprimen instantáneamente. Como se muestra abajo:

Tuvimos el retraso inicial, pero no hay retraso después de eso. Por qué es así? Bueno, la forma en que el setTimeout () funciona es que siempre se ejecuta en modo síncrono. Esto significa que incluso tener múltiples llamadas a la misma función dará como resultado el retraso de 1 segundo.

Lo que hicimos fue, invocamos cada setTimeout () método uno tras otro y debido a la naturaleza asincrónica del setTimeout () método, no espera el anterior setTimeout () método para finalizar y luego ejecutar el siguiente.

Entonces, en última instancia, hicimos 10 llamadas a setTimeout () Método todos tienen el mismo tiempo de retraso. Hay una manera de solucionar esto, y es mediante el uso de un temporizador de retraso aumentado como:

setTimeout (() => Consola.log (i), 1000);
setTimeout (() => Consola.log (i), 2000);
setTimeout (() => Consola.log (i), 3000);

El ejemplo de código anterior de imprimir 10 números se convertiría en esto:

para (deja i = 1; console.log (i), i * 1000);

Estamos utilizando el valor creciente de la variable "i" y multiplicándola con el retraso de 1 segundo para crear retrasos incrementados para cada llamada de setTimeout ()

La salida con esto se convierte en:

Finalmente lo hicimos. Pero todavía hay algo mal aquí. Ese es el hecho de que calcular los retrasos de esta manera es muy complicado, especialmente cuando trabaja en una aplicación del mundo real. Hay una manera para eso también, cree su propio método de retraso/espera.

Cómo codificar su propia función de retraso/espera?

Queremos una mejor solución, lo que podemos hacer es codificar la nuestra "demora" método. Estaremos usando el setTimeout () función y promete ayudarnos a crear el "demora"Método como:

Simplemente crearemos una función con el nombre de "retraso" y lo pasaremos en milisegundos. Esta función de "retraso" devuelve una promesa y no permitirá que la ejecución continúe hasta que se resuelva la promesa.

retraso de la función (ms)
return new Promise (resolve => setTimeOut (resolve, ms));

Ahora, llamamos a esta función de "retraso" con un ".entonces "Operador. Como esto:

consola.log ("hola");
Retraso (2000).entonces (() => consola.Log ("Mundo!"););

La salida sería:

Estamos creando una promesa y setTimeout () método con algún retraso a resolver el promesa. Puedes leer más sobre las promesas de JavaScript.

En caso de que quiera deshacerse del .entonces() método, y para encadenar los retrasos, lo que podemos hacer es usar asíncrata y esperar con nuestra función de "retraso".

ASYNC FUNTION DEMO ()
consola.log ("esto es un");
esperar el retraso (1000);
consola.log ("Linuxhint");
esperar el retraso (1000);
consola.Log ("Tutorial!");

Nota: necesitamos agregar el asíncrata palabra clave con la función que llama al demora() método. Si ejecutamos el programa, lo que obtenemos es esto:

Al llegar a nuestro problema, el número de impresora del 1 al 10, necesitamos crearla dentro de una función async y llamar al método "retraso" al que acabamos de crear:

ASYNC FUNCIÓN NumberPrinter ()
para (deja i = 1; yo <= 10; i++)
consola.log (i);
esperar el retraso (1000)

Y necesitamos llamar a esta función con:

NumberPrinter ();

La salida que obtenemos con esto es:

Eso es todo para nuestra función de "retraso".

Conclusión

No hay incorporado esperar, demora, o función de sueño en JavaScript, pero podemos usar el setTimeout () método para imitar el comportamiento de retraso e incluso podemos codificar el nuestro propio demora() método para crear un retraso en la ejecución del programa. Hemos aprendido como setTimeout () El método funciona, cómo es común malinterpretar su trabajo y uso. Además, aprendimos a combinar el método setTimeOut () con promesas Para crear nuestro propio método de retraso, y también aprendimos a usar asíncrata y esperar en nuestra función esperar y luego continuar la ejecución.