Introducción a las animaciones Javascript: setInterval() y setTimeout()

Introducción a las animaciones Javascript: setInterval() y setTimeout()

Print Friendly, PDF & Email
Introducción a las animaciones Javascript: setInterval() y setTimeout()
Valora esta entrada
En sus inicios Javascript era un lenguaje que servía principalmente para validar campos en formularios.

Incluso muchos programadores de la década de los 90′ no terminaban de considerarlo un lenguaje serio.

La caída de la empresa (Netscape) que lo inventó frente al dominio del todopoderoso Explorer del archiconocido Microsoft hizo que durante unos años su desarrollo quedara en la sombra.

Sin embargo con el tiempo fue ganando en riqueza y complejidad. Y de aquí su resurgir gracias a empresas como Google y Yahoo en la década de los 2000. Si tenéis más curiosidad pasaros por esta entrada!.

Lo que hoy nos trae por aquí es el uso de una de estas funcionalidades que permite hacer maravillas.

Se trata de las funciones setInterval(“”,) y setTimeOut(“”,) que usaremos para eventos programados y animaciones.

setInterval( )

setInterval(nombreFuncionAnonima, intervaloMilisegundos)

La función setInterval ejecuta una instrucción indefinidamente cada un cierto periodo de tiempo.

La segunda expresión dentro del paréntesis es un número que representa milisegundos. Siempre son milisegundos y no se indican unidades de ningún tipo.

La primera expresión dentro del paréntesis es una función anónima.

Frena frena frena, ¿función anónima?

Una función anónima es una función que usamos sin los paréntesis…o que no tiene nombre.

Me explico.

El paréntesis () podemos interpretarlo como ejecución inmediata.

Hacer lo siguiente. Coger cualquier función y escribirla en la consola del navegador sin los paréntesis. Veréis que la consola devuelve el propio contenido de la función.

Una función que no tiene el paréntesis podemos asignarla. A esto nos referíamos en el capítulo de variables cuando decíamos que las funciones eran también un tipo de variable.

De este modo podríamos escribir

Forma 1 de escribirlo

setInterval(saludar, 5000);

function saludar(){window.alert(“saludos”);}

y cada 5s ejecutaríamos la función saludar que ha quedado declarada en la segunda línea de código y que hemos asignado y escrito sin el paréntesis ( ).

En algunas bibliografías muy conocidas de internet también lo encontraréis todo en una línea como:

Forma 2 de escribirlo

setInterval(function(){window.alert(“saludos”);},5000);

que directamente no usa el nombre la función pero asigna una funcionalidad. Por eso se habla de función anónima.

¿De que forma prefieres escribirlo tu? Yo indiscutiblemente como la primera.

Las ventajas que tiene son:

  • Es más fácil de entender
  • Puedes reutilizar la función saludo tantas veces como quieras. El segundo método asigna la funcionalidad pero no es reutilizable.

Parar un setInterval() para que no se ejecute más

var parar = setInterval(nombreFuncionAnonima, intervaloMilisegundos)

Para parar un setInterval() se asigna el setInterval a una variable con un nombre cualquiera que sea fácil de entender.

Nombres típicos son stop, id, clear, …

Entonces en el momento que nos interesa se ejecuta la siguiente instrucción:

clearInterval(parar)

Y no hace falta nada más.

Típicamente se suele poner dentro de un condicional cuando se ha cumplido una determinada condición.

O se llama mediante la instrucción que vemos a continuación: setTimeout()

setTimeout()

setTimeout(nombreFuncionAnonima, intervaloMilisegundos

Cuidado con escribir setTimeout correctamente. La o es minúscula.

La función setTimeout únicamente se dispara una vez.

Por ejemplo serviría para el típico aviso de suscríbete a una newsletter que se ejecuta cuando llevas un rato navegando por una página web.

Un uso que me suele gustar darle es por ejemplo utilizar la función setTimeout() para parar un setInterval() mediante el clearInterval(). Es lioso pero creo que si se entiende.

Os dejo un completo ejemplo de clase dónde se escribe un reloj con javascript que se para sólo a los 3 segundos y en que se hace uso de todas las funciones mencionadas en este escrito.

reloj javascript
Ejemplo de código de un reloj escrito con javascript

¡Y hasta aquí el resumen de hoy!

Ahora es tu turno de abrir el brackets o el sublime y empezar a escribir un código facilito para asimilar los conceptos.

¡Hasta mañana!

Entradas relacionadas:

Ejercicio JS – Susto emergente
- 22
Ejemplo de programación de una ventana emergente con Javascript. Incluye solución. Serie de ejercicios tutorial javascript del curso ifcd0110
Como modificar el destino de todos los enlaces de una web con javascript
- 91
Ejercicio con solución de la serie ejercicios javascript puro dónde se muestra como modificar el href de todos los enlaces de una web.
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 227
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Ejercicio – Vamos a dormir, hay 100 ovejas que contar
- 53
Ejercicio javascript dónde se practica el uso de for y de while para la resolución de un mismo problema JS. Incluye solución.
Validación de campos try catch finally en Javascript puro
- 340
Explicación teórica y ejemplo práctico del uso de las instrucciones try + throw, catch y finally en javascript. Utilizamos esta estructura para validar un campo en un formulario. Sin embargo se puede ...
Factores que afectan al tiempo de carga de una página web
- 256
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Función que crea un objeto y lo almacena en una lista en Javascript
- 400
Javascript es un lenguaje basado en el uso de objetos. Los objetos son recursos que nos permiten agrupar un conjunto de propiedades alrededor de una idea común. Un constructor es un tipo especial de f...
Ejercicio – El pokemon corredor
- 32
Ejercicio con solución dónde se usa setInterval y el posicionamiento relativo y absoluto de una caja html. Serie de ejercicios javascript.
Ejercicio JS – Rellenar contenidos usando el DOM
- 49
Serie de ejercicios resueltos del tutorial Javacript. Uso básico del DOM. Incluye el repaso básico de teoria a leer y explicación.
Ejercicio – Sumas con letras
- 104
En este ejercicio vemos de forma práctica si la suma de valores numéricos o strings resulta en una suma o una concatenación.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.