Un Timer es una característica o funcionalidad que nos permite ejecutar una funcion cada cierto tiempo en segundos o milisegundos, en javascript usaremos la función setinterval.
💡 ¿Quieres aprender más? Este artículo es parte de nuestra Recopilación de Plugins JavaScript y jQuery → donde encontrarás más de 20 tutoriales gratuitos esperándote para llevar tus habilidades al siguiente nivel.
La función setInterval de javascript permite ejecutar una función o un bloque de código cada X milisegundos.
Aprende a Crear una grafica de Barras y Lineas con Javascript y Chart.js
La sintaxis de la funcion setInterval es la siguiente:
setInterval(function(){ /// }, 1000);Donde la función contiene el bloque de código que se ejecutara/repetirá y 1000 es la cantidad de milisegundos en que se repetirá la función.
Un milisegundo es la milesima parte de un segundo, por tanto 1000 milisegundos equivalen a 1 segundo.
10000 milisegundos son 10 segundos.
También podemos hacer operaciones por ejemplo: 60*1000 son 60000 segundos, es decir un minuto.
Ejemplo setInterval
Ahora veamos un ejemplo:
n=0;
x = setInterval(function(){
console.log(n);
n++;
},1000);En el ejemplo inicializamos la variable n en CERO y en la función interna de setInterval vamos a imprimir por consola el valor de n e incrementaremos 1 en cada ciclo, es decir cada 1000 milisegundos.
El resultado sera 1, 2,3 ,4 5 … hasta el infinito o hasta que se vuelva a recargar la pagina donde tengamos el script.
La función setInterval puede asignarse a una variable identificador como en este caso o puede ejecutarse sin usar una variable.
En este caso la variable x tendrá el objeto o identificador del setInterval.
Ejemplo clearInterval
Para detener el setInterval en cualquier momento vamos a usar la funcion clearInterval(identificador), que lleva como parametro el identificador del setInterval.
n=0;
x = setInterval(function(){
console.log(n);
if(n==100){ clearInterval(x); }
n++;
},1000);Este ejemplo de codigo es el mismo que en el ejemplo anterior, solo le agregamos una condicional if.
En caso de que el contador n sea igual a 100 entonces ejecutaremos la función clearInterval(x).
Donde x es el identificador del setInterval.
Asi finalizamos el setInterval en 100 ciclos o en los ciclos que se considere necesario
Ustedes pueden hacer sus pruebas, en el siguiente ejemplo veremos como activar y detener el timer usando botones.
Si tienen dudas no olviden dejar sus comentarios.
¿Necesitas un software de ventas listo para producción?
Inventio Max es la solución profesional con soporte para múltiples almacenes, reportes avanzados y gestión de usuarios.
Ver Inventio Max – Sistema de Inventario y Ventas Profesional →