JS 08: Temporizadores

1. ¿Qué son los Temporizadores?

Los temporizadores te permiten ejecutar código JavaScript después de un cierto tiempo o de forma repetida a intervalos regulares.

2. setTimeout: Ejecutar una vez después de un tiempo

setTimeout() ejecuta una función una sola vez después de esperar un número determinado de milisegundos (1000ms = 1 segundo).

Sintaxis

setTimeout(función, milisegundos);

// Ejemplo básico
setTimeout(function() {
    console.log("Han pasado 2 segundos");
}, 2000); // 2000 milisegundos = 2 segundos

Ejemplo con Función Flecha

// Versión moderna con arrow function
setTimeout(() => {
    console.log("Mensaje retrasado 3 segundos");
}, 3000);

Pasando Parámetros

function saludar(nombre, hora) {
    console.log(`Hola ${nombre}, son las ${hora}`);
}

// Los parámetros se pasan DESPUÉS del tiempo
setTimeout(saludar, 1000, "Ana", "10:30");

Ejemplo Interactivo

3. clearTimeout: Cancelar un setTimeout

Si guardas el ID que devuelve setTimeout, puedes cancelarlo antes de que se ejecute.

// Guardar el ID del temporizador
let timerId = setTimeout(() => {
    console.log("Esto no se ejecutará");
}, 5000);

// Cancelar antes de que se ejecute
clearTimeout(timerId);
console.log("Temporizador cancelado");

Ejemplo Interactivo: Cancelar setTimeout

4. setInterval: Ejecutar repetidamente

setInterval() ejecuta una función repetidamente cada X milisegundos hasta que lo detengas.

Sintaxis

setInterval(función, milisegundos);

// Ejemplo: Reloj que imprime la hora cada segundo
setInterval(() => {
    console.log(new Date().toLocaleTimeString());
}, 1000);

⚠️ Importante: Siempre Detener setInterval

Si no detienes un setInterval, seguirá ejecutándose para siempre, consumiendo recursos.

// ❌ MAL: Esto nunca se detiene
setInterval(() => {
    console.log("Esto se ejecuta infinitamente");
}, 1000);

// ✅ BIEN: Guardamos el ID para poder detenerlo
let intervalId = setInterval(() => {
    console.log("Mensaje cada segundo");
}, 1000);

// Detener después de 5 segundos
setTimeout(() => {
    clearInterval(intervalId);
    console.log("Intervalo detenido");
}, 5000);

5. clearInterval: Detener un setInterval

Para detener un setInterval, usamos clearInterval() con el ID que nos devolvió.

Ejemplo: Contador con Inicio y Detención

let contador = 0;
let intervalId = null;

function iniciarContador() {
    if (intervalId) return; // Evitar múltiples intervalos
    
    intervalId = setInterval(() => {
        contador++;
        document.getElementById('contador').textContent = contador;
    }, 1000);
}

function detenerContador() {
    clearInterval(intervalId);
    intervalId = null;
}

function reiniciarContador() {
    detenerContador();
    contador = 0;
    document.getElementById('contador').textContent = contador;
}

6. Casos de Uso Prácticos

Cuenta Regresiva

function cuentaRegresiva(segundos) {
    let tiempo = segundos;
    
    const intervalId = setInterval(() => {
        console.log(tiempo);
        tiempo--;
        
        if (tiempo < 0) {
            clearInterval(intervalId);
            console.log("¡Tiempo terminado!");
        }
    }, 1000);
}

cuentaRegresiva(10); // Cuenta desde 10 hasta 0

Animación Simple

let posicion = 0;
const elemento = document.getElementById('objeto');

const animacion = setInterval(() => {
    posicion += 5;
    elemento.style.left = posicion + 'px';
    
    if (posicion >= 300) {
        clearInterval(animacion);
    }
}, 50); // Se mueve cada 50ms (20 veces por segundo)

Auto-guardado

// Guardar datos cada 30 segundos
setInterval(() => {
    guardarDatosEnLocalStorage();
    console.log("Datos guardados automáticamente");
}, 30000); // 30000ms = 30 segundos

7. setTimeout vs setInterval: ¿Cuál usar?

8. Buenas Prácticas