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.
¡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!
Deja una respuesta