- setTimeout permite ejecutar una función una sola vez tras un retraso específico, mientras que setInterval lo hace de forma recurrente.
- Ambos métodos devuelven un ID que permite cancelar la ejecución mediante clearTimeout y clearInterval respectivamente.
- requestAnimationFrame es la opción preferida para animaciones ya que optimiza el rendimiento y se pausa en pestañas inactivas.
- El uso de setTimeout anidado ofrece mayor precisión que setInterval al garantizar un intervalo real entre ejecuciones.
¿Alguna vez te has preguntado cómo hacer que una web no lo suelte todo de golpe y espere un momento antes de ejecutar una acción? Pues bien, ahí es donde entran en juego los temporizadores de las Web APIs, herramientas fundamentales para cualquier desarrollador que quiera darle dinamismo y ritmo a sus aplicaciones en el navegador.
Aunque a veces parezca magia, el funcionamiento de estos métodos es bastante lógico. Básicamente, nos permiten planificar la ejecución de un trozo de código para que no ocurra inmediatamente, sino cuando haya transcurrido un tiempo determinado o de forma cíclica, permitiendo que el resto del script siga corriendo sin quedarse colgado.
El método setTimeout: Ejecución única
Cuando necesitamos que algo pase una sola vez tras una pausa, recurrimos a setTimeout(). Este método le dice al navegador: «Oye, guarda esta función y ejecútala cuando pasen X milisegundos». Es importante recordar que 1 segundo equivale a 1000 milisegundos, por lo que si quieres un retraso de 5 segundos, deberás poner 5000.
En cuanto a su estructura, el método acepta una función (o una referencia a ella) y el tiempo de espera. Aunque históricamente se podían pasar cadenas de texto con código, hoy en día es una mala práctica y lo más habitual es usar funciones anónimas o funciones flecha por ser mucho más compactas y limpias.
Un detalle técnico crucial es que setTimeout() devuelve un identificador único (ID). Este numerito es la llave que nos permite cancelar la acción antes de que se produzca mediante el método clearTimeout(id). Si te arrepientes de haber programado una tarea, simplemente pasas ese ID y el temporizador se anula al instante.
Repeticiones con setInterval
Si lo que buscas es que una acción se repita como un reloj, el candidato ideal es setInterval(). A diferencia del anterior, este no se detiene tras la primera ejecución, sino que lanza la función continuamente cada vez que expira el intervalo definido.
Para frenar este bucle infinito, necesitamos usar clearInterval(id), pasando el identificador que nos devolvió el método al crearlo. Si te olvidas de hacer esto, la función seguirá viviendo en la memoria, lo que puede provocar fugas de memoria ya que la función mantiene referencias a su entorno léxico externo.
Alternativas avanzadas y optimizaciones
A veces, setInterval() puede quedarse corto o ser impreciso porque no tiene en cuenta cuánto tarda en ejecutarse la función misma. Para solucionar esto, existe el setTimeout anidado. En lugar de programar una repetición fija, llamamos a un nuevo setTimeout() justo al final de la ejecución de la función actual. Esto garantiza un espacio de tiempo real y constante entre el final de una tarea y el inicio de la siguiente.
Cuando hablamos de animaciones, usar temporizadores estándar puede ser un dolor de cabeza por el rendimiento. Por eso existe requestAnimationFrame(). Esta API es mucho más inteligente porque optimiza los frames automáticamente y, lo más importante, deja de ejecutarse si el usuario cambia de pestaña, evitando que la batería del dispositivo se agote innecesariamente.
Curiosidades y limitaciones del navegador
Hay un truco muy común que es usar setTimeout(func, 0). Esto no significa que se ejecute en cero milisegundos exactos, sino que se planifica para que ocurra lo antes posible, pero siempre después de que el script actual haya terminado de procesarse por completo.
No obstante, no debemos confiar ciegamente en la precisión del tiempo. El navegador puede retrasar la ejecución si la CPU está a tope o si el equipo está en modo de ahorro de energía. Además, por razones históricas, los navegadores imponen un retraso mínimo de 4ms después de que se hayan encadenado cinco o más llamadas anidadas, para evitar que el sistema colapse.
Dominar estas herramientas permite gestionar la asincronía de JavaScript con soltura, alternando entre ejecuciones únicas, bucles precisos y animaciones fluidas mediante el control de los IDs de temporización y el uso de APIs optimizadas según la necesidad del proyecto.