Crear un Timer con Javascript

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.

La función setInterval de javascript permite ejecutar una función o un bloque de código cada X milisegundos.

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.