Planificación: setTimeout y setInterval
JavaScript ofrece métodos para diferir la ejecución de funciones no inmediatamente, sino después de un período específico. Esto se conoce como «programar una llamada».
setTimeout
El método setTimeout permite ejecutar una función una sola vez después de un tiempo determinado.
Sintaxis y Parámetros
La sintaxis básica es:
let timerId = setTimeout(func|código, [retraso], [arg1], [arg2], ...)
func|código: Una función o una cadena de código que se ejecutará después del tiempo especificado.retraso: El tiempo en milisegundos antes de que se ejecute la función, por defecto es 0.arg1,arg2, …: Argumentos opcionales que se pasarán a la función cuando se llame.
Ejemplos de Uso
Por ejemplo, para llamar a sayHi después de un segundo:
function sayHi() {
alert('Hola');
}
setTimeout(sayHi, 1000);
Incluso puedes pasar argumentos a la función:
function sayHi(phrase, who) {
alert( phrase + ', ' + who );
}
setTimeout(sayHi, 1000, "Hola", "John"); // Hola, John
Si el primer argumento es una cadena, JavaScript lo convierte automáticamente en una función:
setTimeout("alert('Hola')", 1000);
Sin embargo, es recomendable evitar el uso de cadenas y preferir funciones de flecha:
setTimeout(() => alert('Hola'), 1000);
Evitar Errores Comunes
Es importante no añadir paréntesis después de la función:
// ¡Incorrecto!
setTimeout(sayHi(), 1000);
Esto no funciona porque setTimeout espera una referencia a una función, pero sayHi() se ejecuta inmediatamente y no devuelve nada.
Cancelación con clearTimeout
setTimeout devuelve un identificador de temporizador (timerId) que se puede usar para cancelar la ejecución:
let timerId = setTimeout(() => alert("No pasa nada"), 1000);
clearTimeout(timerId);
Esto cancelará la ejecución planificada y evitará que se muestre la alerta.
setInterval
A diferencia de setTimeout, setInterval ejecuta una función repetidamente cada cierto intervalo de tiempo:
let timerId = setInterval(func|código, [retraso], [arg1], [arg2], ...)
Todos los parámetros tienen el mismo significado que en setTimeout, pero en lugar de ejecutarse una vez, la función se ejecutará repetidamente.
Detener llamadas repetidas con clearInterval
Para detener la ejecución repetida de setInterval, utilizamos clearInterval:
let timerId = setInterval(() => alert('tick'), 2000);
setTimeout(() => {
clearInterval(timerId);
alert('stop');
}, 5000);
Uso de setTimeout Anidado
En lugar de setInterval, a veces es más flexible utilizar setTimeout anidado para ejecuciones regulares:
let timerId = setTimeout(function tick() {
alert('tick');
timerId = setTimeout(tick, 2000); // Planificar la próxima ejecución
}, 2000);
Esto permite ajustar dinámicamente el tiempo entre llamadas, según sea necesario.
Retraso Cero en setTimeout
setTimeout(func, 0) o simplemente setTimeout(func) programa la ejecución de func lo más pronto posible después de que se complete el script actual.
setTimeout(() => alert("Mundo"));
alert("Hola");
Esto mostrará primero «Hola» y luego «Mundo», ya que setTimeout con retraso cero se ejecuta después de que el script actual finalice.
Consideraciones Finales
JavaScript en el navegador tiene limitaciones en la frecuencia de ejecución de temporizadores anidados, estableciendo un retraso mínimo de 4 ms después de cinco llamadas consecutivas.
Es importante recordar que los métodos de planificación (setTimeout y setInterval) no garantizan un tiempo exacto de ejecución debido a factores como la carga de la CPU o el estado del sistema.
En resumen, setTimeout y setInterval son herramientas poderosas para controlar el tiempo de ejecución de funciones en JavaScript, cada una con su propia aplicación y consideraciones de uso.
