Javascript / setInterval – clearInterval

Anuncios

Bienvenidos sean a este post, hoy hablaremos sobre dos metodos para utilizar intervalos.

Anuncios

Cuando hablamos de intervalos nos referimos a una accion ejecutada por el lenguaje cada una determinada cantidad de tiempo, tenemos disponibles dos metodos donde uno nos servira para establecerlo (setInterval) y otro para eliminarlo (clearInterval), veamos las sintaxis de ambos:

setInterval(funcion, tiempo[, param1, param2, ...]);

Anuncios

Este es el metodo que se encarga de establecer el intervalo, los dos primeros parametros son obligatorios, el primer argumento sera la funcion que sera llamada en cada intervalo, el segundo parametro sera el tiempo del intervalo en milisegundos, en las versiones nuevas se agrego la posibilidad de pasar parametros pero son opcionales, veamos la sintaxis del otro metodo:

clearInterval(intervalo)

Anuncios

Este es mas simiple dado que solamente debemos pasar el intervalo que debemos limpiar, vamos a hacer un pequeño ejemplo para verlo en accion, para ello simplemente creen un archivo de tipo HTML en el escritorio y lo abren con el navegador, por ejemplo pueden llamarlo intervalo.html y agreguen el siguiente codigo:

intervalo.html

<html>
<head>
<title>Metodo removeEventListener()</title>
</head>
<body>
<div id="texto">0</div>
<button type="button" onclick="activar()">Activar intervalo</button>
<button type="button" onclick="desactivar()">Desactivar intervalo</button>
</body>
<script language="javascript">
	
let x, texto;
var y = 0;

texto = document.getElementById("texto");

function sumar()
{
	y++;
	texto.innerHTML = y;
}

function activar()
{
	 x = setInterval(sumar, 1000);
}

function desactivar()
{
	y = 0;
	clearInterval(x);
}

</script>
</html>

Anuncios

Un ejemplo simple pero efectivo, primero hablemos sobre el HTML, en este caso tendremos un DIV para mostrar un texto y dos botones para activar y desactivar el intervalo, observen que usamos el onclick para llamar a las respectivas funciones, con esto comentado pasemos a hablar sobre el codigo de Javascript.

Anuncios

Lo primero que haremos sera declarar un par de variables, la primera sera para almacenar nuestro intervalo, y la segunda la usaremos para el texto, despues definiremos una variable con el valor de 0 pero de esto hablaremos luego, lo siguiente sera asignar el DIV que esta en la parte del HTML a la variable texto por medio de getElementById, pasemos a hablar sobre esta funcion:

function activar()
{
	 x = setInterval(sumar, 1000);
}

Anuncios

Esta sera la funcion encargada de activar el intervalo, observen que al metodo setInterval lo asignamos a la variable x que declaramos al comienzo, como funcion pasamos una que explicaremos luego, y luego le pasamos el tiempo de demora, recuerden que debe ser en milisegundos por lo tanto el valor que pasamos equivaldra a un segundo, pasemos a la siguiente funcion:

function desactivar()
{
	y = 0;
	clearInterval(x);
}

Anuncios

Esta es la funcion que se encargara de eliminar al intervalo que activamos con la otra funcion, en este caso reiniciaremos el valor de y con el mismo al momento de definirlo, por ultimo llamamos a clearInterval y le pasamos la variable que usamos para almacenar el intervalo, hablemos sobre la ultima funcion:

function sumar()
{
	y++;
	texto.innerHTML = y;
}

Anuncios

Esta es la funcion que llamaremos cada vez que se cumpla el intervalo, en esta incrementaremos el valor de y para luego pasarlo a la variable texto donde usaremos a innerHTML para que escriba dentro del DIV que vinculamos a esta variable, con todo esto comentado podemos pasar a ejecutarlo y ver como trabaja mediante el siguiente video

Anuncios

Como pueden ver cuando iniciamos el intervalo este empieza a contar hasta que lo detenemos con la otra accion y por ende deja de contar, cuando lo iniciamos nuevamente este comienza desde el principio como hizo la primera vez, si bien el setInterval se puede usar directamente lo ideal es siempre asignarlo a una variable para tener el id que le asigna el lenguaje y despues eliminarlo en caso de ser necesario.

Anuncios

En resumen, hoy hemos visto a setInterval y clearInterval, que son, como trabajan, como son sus sintaxis, hemos visto un ejemplo para verlo en accion, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Anuncios