Las diferencias de usar setInterval() y setTimeout()

Siempre es bien común el momento en que se nos mete a la idea como desarrolladores principiantes el hacer el típico reloj para nuestro sitio web. En realidad no hay forma como tal para que se actualice el estado de una capa por arte de magia, pero con ayuda de Javascript y los timers, podemos simular una acción en movimiento o en cambio cada cierto tiempo.

En Javascript hay dos funciones muy conocidas pero confusas para los aprendices, que nos permiten repetir una tarea, específicamente una función, cada cierto tiempo, y hoy vamos a ver las diferencias. Entonces, no se pierdan el tutorial para conocer las diferencias entre setInterval() y setTimeout() para definir timers con Javascript, muy útil si lo que quieren es que una parte de su sitio o aplicación web necesita actualizarse de forma local (para actualizar información del servidor lo más recomendable es usar WebSockets)

window.setInterval()

setInterval() es una función que proviene de la clase u objeto window, pero de hecho podemos declararla sin esa declaración. setInterval nos permite repetir una acción cada determinado tiempo. Generalmente lo que se usa es una función para poder repetir, aunque se puede crear una función lambda o anónima para ejecutar una acción. En la imagen se puede ver que por ejemplo la caja azul cada 1000ms (1s) pierde opacidad, haciendo referencia a que esta función es constante, nunca se detiene.

Estructura

La estructura de la función es la siguiente:

Donde el tiempo se mide en milisegundos. 1000 ms = 1s de tal forma que teniendo estos dos valores completos empieza a correr el timer y a ejecutar las instrucciones.

¿Cómo lo detengo?

En un principio con la simple declaración de la función es imposible detenerla, para eso necesitamos asignarle a una variable la función, de tal forma que sea la variable quien controle el timer. Para detener un setInterval() usamos la función clearInterval():

window.setTimeout()

A diferencia de setInterval() setTimeout() espera un determinado tiempo para ejecutar la función o acciones, y una vez que pasa ese tiempo ya no vuelve a ejecutar nada. Es una función que se usa para ejecutar una función una sola vez.

Estructura

La estructura es similar a la de setInterval()

Y al igual que con setInterval podemos asignar una variable para que sea el controlador de la función setTimeout(). Ahora, es recomendable usar esto ya que aunque la función sólo se ejecuta una sola vez, la función sigue corriendo aunque ya no esté ejecutando nada.

Recomendaciones

Estas dos funciones son muy sencillas de usar y de manipular, pero obviamente hay algunas consideraciones que se deben tomar para que funciones correctamente.

• No usar muchas funciones definidas. En general tratemos de usar solamente una función, no declaremos varias funciones setInterval o setTimeout porque a la larga nosotros no podremos controlar cada una y el sitio o aplicación será un caos.
• No sobrecargar las funciones. Estas funciones sirven para actualizar un estado de elemento cada cierto tiempo, o para hacer alguna operación, y aunque no tiene un límite lo mejor es siempre pensar en la solución más pequeña, que no incluya gran procesamiento, porque al final ese mismo esfuerzo en ejecutar la función es el mismo que lo hará cada cierto tiempo, alentando bastante la aplicación o sitio web.
• Llamar cuando sea necesario a las funciones. Así sea implementar un reloj lo recomendable es que se manden a llamar cuando sean necesarios. Es una mala idea cargarla función desde un principio y dejarla correr todo el tiempo. También hay que saber cuando detenerla y volverla a llamar, ya qué así se hace más eficiente la aplicación o sitio web.

Conclusiones

Estas son las principales diferencias sobre estas dos funciones. En un post posterior vamos a ver como podemos usarlas para crear cosas muy interesantes, además de la del típico reloj que se actualiza.