En este tutorial, aprenderá sobre el método setInterval () de JavaScript con la ayuda de ejemplos.
En JavaScript, un bloque de código se puede ejecutar en intervalos de tiempo específicos. Estos intervalos de tiempo se denominan eventos de tiempo.
Hay dos métodos para ejecutar código a intervalos específicos. Son:
- setInterval ()
- setTimeout ()
En este tutorial, aprenderá sobre el setInterval()método.
JavaScript setInterval ()
El setInterval()método repite un bloque de código en cada evento de tiempo dado.
La sintaxis comúnmente utilizada de JavaScript setInterval es:
setInterval(function, milliseconds);
Sus parámetros son:
- función : una función que contiene un bloque de código
- milisegundos : el intervalo de tiempo entre la ejecución de la función
El setInterval()método devuelve un intervalID que es un entero positivo.
Ejemplo 1: mostrar un texto una vez cada segundo
// program to display a text using setInterval method function greet() ( console.log('Hello world'); ) setInterval(greet, 1000);
Salida
Hola mundo Hola mundo Hola mundo Hola mundo Hola mundo….
En el programa anterior, el setInterval()método llama a la greet()función cada 1000 milisegundos ( 1 segundo).
Por lo tanto, el programa muestra el texto Hola mundo una vez cada 1 segunda.
Nota : El setInterval()método es útil cuando desea repetir un bloque de código varias veces. Por ejemplo, mostrar un mensaje a un intervalo fijo.
Ejemplo 2: Mostrar el tiempo cada 5 segundos
// program to display time every 5 seconds function showTime() ( // return new date and time let dateTime= new Date(); // return the time let time = dateTime.toLocaleTimeString(); console.log(time) ) let display = setInterval(showTime, 5000);
Salida
"5:15:28 PM" "5:15:33 PM" "5:15:38 PM"….
El programa anterior muestra la hora actual una vez cada 5 segundos.
new Date()da la fecha y hora actuales. Y toLocaleTimeString()devuelve la hora actual. Para obtener más información sobre la fecha y la hora, visite Fecha y hora de JavaScript.
JavaScript clearInterval ()
Como ha visto en el ejemplo anterior, el programa ejecuta un bloque de código en cada intervalo de tiempo especificado. Si desea detener la llamada a esta función, puede usar el clearInterval()método.
La sintaxis del clearInterval()método es:
clearInterval(intervalID);
Aquí, intervalIDes el valor de retorno del setInterval()método.
Ejemplo 3: usar el método clearInterval ()
// program to stop the setInterval() method after five times let count = 0; // function creation let interval = setInterval(function()( // increasing the count by 1 count += 1; // when count equals to 5, stop the function if(count === 5)( clearInterval(interval); ) // display the current time let dateTime= new Date(); let time = dateTime.toLocaleTimeString(); console.log(time); ), 2000);
Salida
4:47:41 PM 4:47:43 PM 4:47:45 PM 4:47:47 PM 4:47:49 PM
En el programa anterior, el setInterval()método se utiliza para mostrar la hora actual cada 2 segundos. El clearInterval()método detiene la llamada a la función después de 5 veces.
También puede pasar argumentos adicionales al setInterval()método. La sintaxis es:
setInterval(function, milliseconds, parameter1,… .paramenterN);
Cuando se pasan parámetros adicionales para el setInterval()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 setInterval setInterval(greet, 1000, 'John', 'Doe');
Salida
Hola John Doe Hola John Doe Hola John Doe….
En el programa anterior, se pasan dos parámetros Johny Doeal setInterval()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 setInterval()método.
Nota: Si solo necesita ejecutar una función una vez, es mejor usar el método setTimeout ().
