En este tutorial, aprenderá sobre el método setTimeout () de JavaScript con la ayuda de ejemplos.
El setTimeout()método ejecuta un bloque de código después del tiempo especificado. El método ejecuta el código solo una vez.
La sintaxis comúnmente utilizada de JavaScript setTimeout es:
setTimeout(function, milliseconds);
Sus parámetros son:
- función : una función que contiene un bloque de código
- milisegundos : el tiempo después del cual se ejecuta la función
El setTimeout()método devuelve un intervalID , que es un entero positivo.
Ejemplo 1: mostrar un texto una vez después de 3 segundos
// program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) setTimeout(greet, 3000); console.log('This message is shown first');
Salida
Este mensaje se muestra primero Hola mundo
En el programa anterior, el setTimeout()método llama a la greet()función después de 3000 milisegundos ( 3 segundos).
Por lo tanto, el programa muestra el texto Hola mundo solo una vez después de 3 segundos.
Nota : El setTimeout()método es útil cuando desea ejecutar un bloque de una vez después de un tiempo. Por ejemplo, mostrar un mensaje a un usuario después del tiempo especificado.
El setTimeout()método devuelve la identificación del intervalo. Por ejemplo,
// program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) let intervalId = setTimeout(greet, 3000); console.log('Id: ' + intervalId);
Salida
Id: 3 Hola mundo
Ejemplo 2: Mostrar el tiempo cada 3 segundos
// program to display time every 3 seconds function showTime() ( // return new date and time let dateTime= new Date(); // returns the current local time let time = dateTime.toLocaleTimeString(); console.log(time) // display the time after 3 seconds setTimeout(showTime, 3000); ) // calling the function showTime();
Salida
5:45:39 PM 5:45:43 PM 5:45:47 PM 5:45:50 PM…
El programa anterior muestra la hora cada 3 segundos.
El setTimeout()método llama a la función solo una vez después del intervalo de tiempo (aquí 3 segundos).
Sin embargo, en el programa anterior, dado que la función se llama a sí misma, el programa muestra la hora cada 3 segundos.
Este programa se ejecuta indefinidamente (hasta que se agota la memoria).
Nota : Si necesita ejecutar una función varias veces, es mejor usar el setInterval()método.
JavaScript clearTimeout ()
Como ha visto en el ejemplo anterior, el programa ejecuta un bloque de código después del intervalo de tiempo especificado. Si desea detener esta llamada de función, puede utilizar el clearTimeout()método.
La sintaxis del clearTimeout()método es:
clearTimeout(intervalID);
Aquí, intervalIDes el valor de retorno del setTimeout()método.
Ejemplo 3: usar el método clearTimeout ()
// program to stop the setTimeout() method let count = 0; // function creation function increaseCount()( // increasing the count by 1 count += 1; console.log(count) ) let id = setTimeout(increaseCount, 3000); // clearTimeout clearTimeout(id); console.log('setTimeout is stopped.');
Salida
setTimeout está detenido.
En el programa anterior, el setTimeout()método se utiliza para aumentar el valor del recuento después de 3 segundos. Sin embargo, el clearTimeout()método detiene la llamada a la función del setTimeout()método. Por tanto, el valor de recuento no aumenta.
Nota : Generalmente, usa el clearTimeout()método cuando necesita cancelar la setTimeout()llamada al método antes de que suceda.
También puede pasar argumentos adicionales al setTimeout()método. La sintaxis es:
setTimeout(function, milliseconds, parameter1,… .paramenterN);
Cuando se pasan parámetros adicionales para el setTimeout()método, estos parámetros ( parameter1, parameter2, etc.) serán pasados a la especificada función .
Por ejemplo,
// program to display a name function greet(name, lastName) ( console.log('Hello' + ' ' + name + ' ' + lastName); ) // passing argument to setTimeout setTimeout(greet, 1000, 'John', 'Doe');
Salida
Hola John Doe
En el programa anterior, se pasan dos parámetros Johny Doeal setTimeout()método. Estos dos parámetros son los argumentos que se pasarán a la función (aquí, greet()función) que se define dentro del setTimeout()método.
Lectura recomendada: JavaScript async () y await ()
