JavaScript
Explica qué garantizan setTimeout y setInterval, cómo aparece la deriva, cuándo usar requestAnimationFrame y cómo evitar solapamientos y timers sin limpiar.
Los timers no ejecutan código al cumplirse exactamente un tiempo. Hacen que una callback pueda ser programada después de un retraso mínimo.
setTimeout(() => {
console.log("Later");
}, 1000);const timeoutId = setTimeout(callback, delay);Para cancelarlo:
clearTimeout(timeoutId);Cancelar evita una ejecución todavía pendiente; no detiene una callback que ya comenzó.
setTimeout(callback, 0);Significa “en una task futura cuando sea posible”, no “ejecutar ahora”.
No utilices timers como relojes de precisión.
const intervalId = setInterval(refresh, 1000);Programa intentos repetidos. Si el trabajo tarda demasiado o el hilo está ocupado, las ejecuciones pueden retrasarse y acumular deriva temporal.
Peligroso:
setInterval(async () => {
await synchronize();
}, 1000);Si synchronize tarda más de un segundo, pueden coexistir varias ejecuciones.
Una planificación después de terminar evita solapamiento:
async function poll() {
try {
await synchronize();
} finally {
setTimeout(poll, 1000);
}
}
poll();Ahora el siguiente ciclo comienza un segundo después de finalizar el anterior.
const startedAt = Date.now();
let iteration = 0;
function tick() {
iteration++;
const expectedAt = startedAt + iteration * 1000;
const delay = Math.max(0, expectedAt - Date.now());
setTimeout(tick, delay);
}Para una frecuencia basada en tiempo absoluto, calcula desde un origen en lugar de sumar retrasos observados.
Para actualizaciones visuales:
function animate(timestamp) {
renderFrame(timestamp);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);El navegador coordina la callback con oportunidades de renderizado y puede pausarla o reducirla cuando la página no es visible.
Para medir duraciones dentro de una sesión, performance.now() suele ser más adecuado que Date.now() porque es monotónico y ofrece mejor resolución en entornos compatibles.
const start = performance.now();
runOperation();
const duration = performance.now() - start;Ejecuta después de que cesa una ráfaga.
function debounce(callback, delay) {
let timeoutId;
return function (...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(
() => callback.apply(this, args),
delay,
);
};
}Útil para búsquedas o validaciones que no deben correr por cada tecla.
Limita la frecuencia máxima.
function throttle(callback, interval) {
let available = true;
return function (...args) {
if (!available) return;
available = false;
callback.apply(this, args);
setTimeout(() => {
available = true;
}, interval);
};
}Una implementación real puede necesitar conservar la última llamada, cancelar y limpiar recursos.
Un timer no cancela por sí solo el trabajo.
const timeout = new Promise((_, reject) => {
setTimeout(
() => reject(new Error("Timeout")),
5000,
);
});Competir una promesa con este timeout puede dejar la operación original ejecutándose. La cancelación real necesita cooperación, normalmente mediante AbortSignal u otra API.
Timers asociados a componentes, conexiones o sesiones deben cancelarse cuando dejan de ser necesarios.
const timeoutId = setTimeout(refresh, 5000);
function dispose() {
clearTimeout(timeoutId);
}setInterval con operaciones que pueden solaparse.¿Por qué un setInterval de un segundo puede iniciar varias solicitudes a la vez?
Porque el intervalo programa nuevas callbacks según el tiempo, sin esperar a que la promesa retornada por una ejecución anterior termine.
Promesas presenta el objeto que representa la finalización futura de una operación y sus reglas de resolución.