4.1 Función setTimeout
Los temporizadores en JavaScript te permiten ejecutar ciertas acciones después de un intervalo de tiempo específico. Los dos métodos principales para trabajar con temporizadores son setTimeout() y setInterval(). Se utilizan para ejecutar código con retraso o en intervalos regulares.
El método setTimeout() permite ejecutar una función una sola vez después de una cantidad específica de milisegundos. Esto es útil para la ejecución diferida de código.
Sintaxis:
const timeoutID = setTimeout(callback, delay, ...args);
Dónde:
callback: función que será ejecutadadelay: retraso en milisegundos antes de ejecutar la funciónargs: argumentos adicionales que serán pasados a la funcióncallback
Ejemplo de uso de setTimeout():
// Función que se ejecutará después de 2 segundos
function greet() {
console.log('Hello, world!');
}
// Configuración del temporizador
const timeoutID = setTimeout(greet, 2000);
4.2 Cancelación del temporizador setTimeout
Si necesitas cancelar la ejecución de una función programada con setTimeout(), puedes usar el método clearTimeout():
// Función que se ejecutará después de 2 segundos
function greet() {
console.log('Hello, world!');
}
// Configuración del temporizador
const timeoutID = setTimeout(greet, 2000);
// Cancelación del temporizador
clearTimeout(timeoutID);
Ejemplo con argumentos adicionales:
// Función que se ejecutará después de 2 segundos con argumentos
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Configuración del temporizador con argumento
const timeoutID = setTimeout(greet, 2000, 'Alice');
4.3 Función setInterval
El método setInterval() permite ejecutar una función repetidamente a intervalos especificados. Esto es útil para la ejecución periódica de código.
Sintaxis:
const intervalID = setInterval(callback, delay, ...args);
Dónde:
callback: función que se ejecutarádelay: intervalo en milisegundos entre llamadas a la funciónargs: argumentos adicionales que serán pasados a la funcióncallback
Ejemplo de uso de setInterval:
// Función que se ejecutará cada 2 segundos
function greet() {
console.log('Hello, world!');
}
// Configuración del intervalo
const intervalID = setInterval(greet, 2000);
4.4 Cancelación del intervalo setInterval
Si necesitas detener la ejecución repetida de una función, puedes usar el método clearInterval().
// Función que se ejecutará cada 2 segundos
function greet() {
console.log('Hello, world!');
}
// Configuración del intervalo
const intervalID = setInterval(greet, 2000);
// Cancelación del intervalo después de 10 segundos
setTimeout(() => {
clearInterval(intervalID);
console.log('Interval cleared');
}, 10000);
Ejemplo con argumentos adicionales:
// Función que se ejecutará cada 2 segundos con argumentos
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Configuración del intervalo con argumento
const intervalID = setInterval(greet, 2000, 'Alice');
4.5 Ejemplos de uso práctico
Ejemplo 1: Actualización automática de la hora
<!DOCTYPE html>
<html>
<head>
<title>Auto-update Time</title>
</head>
<body>
<h1>Current Time</h1>
<div id="time"></div>
<script>
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('time').textContent = timeString;
}
// Actualización de la hora cada segundo
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
Ejemplo 2: Petición periódica de datos
// Función para emular una petición de datos
function fetchData() {
console.log('Fetching data...');
// Aquí puedes realizar una solicitud real al servidor
}
// Realización de la petición de datos cada 10 segundos
const intervalID = setInterval(fetchData, 10000);
// Detener solicitudes después de 1 minuto
setTimeout(() => {
clearInterval(intervalID);
console.log('Stopped fetching data');
}, 60000);
GO TO FULL VERSION