Anuncios

Bienvenidos sean a este post, hoy veremos como trabajar con un rango de tiempo.

Anuncios

Este trabaja de forma similar a setInterval pero realiza una accion diferente, sobre este metodo hablamos en este post, dado que en lugar de repetir la accion cada determinado tiempo este lo ejecutara una sola vez una vez alcanzado el tiempo, para establecerlo se utiliza a setTimeout y para quitarlo se utiliza clearTimeout, veamos la sintaxis de ambos:

setTimeout(funcion, tiempo[, param1, param2, ...]);
Anuncios
Anuncios

Este el metodo para establecerlo, primero pasaremos la funcion que usaremos para el momento cuando se alcance el tiempo, despues pasaremos el tiempo de espera que sera en milisegundos, estos dos valores son obligatorios, a partir de las ultimas versiones de Javascript se agrego la posibilidad de pasar parametros a la funcion que ejecutamos pero estos son completamente opcionales, veamos la sintaxis del otro metodo:

clearTimeout(id_timeout);
Anuncios

Como sucedio con clearInterval en este solamente debemos pasar el id del «timeout» establecido para que sea eliminado, para que nos quede mas claro vamos a analizar un ejemplo, para ello simplemente creen un archivo de tipo HTML en el escritorio y deben abrirlo con el navegador, pueden llamarlo timeout.html y agreguen el siguiente ccodigo:

timeout.html

<html>
<head>
<title>Metodo timeout</title>
</head>
<body>
<div id="texto">0</div>
<button type="button" onclick="iniciar()">Iniciar!</button>
<button type="button" onclick="desactivar()">Desactivar timeout</button>
</body>
<script language="javascript">
	
let x, y, i, texto;

texto = document.getElementById("texto");

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

function detener()
{
	clearInterval(x);
	texto.innerHTML = "Se termino el tiempo!";
}

function desactivar()
{
	clearTimeout(y);
}

function iniciar()
{
	i = 0;
	x = setInterval(sumar, 1000);
	y = setTimeout(detener, 10000);
}

</script>
</html>
Anuncios

Un ejemplo simple pero bastante efectivo para entender este metodo e implemetaremos varias cosas, comencemos hablando del cuerpo del HTML que sera lo mas simple, aqui tendremos un DIV llamado texto para mostrar un texto en la pagina, y dos botones, uno para llamar a la funcion iniciar y otro para la funcion desactivar, de ambas hablaremos luego, con esto comentado pasemos al codigo de Javascript.

Anuncios

Primero declararemos unas variables que luego utilizaremos, veamos para que seran utilizadas:

  • x sera para el setInterval
  • y sera para el setTimeout
  • i sera para un contador
  • texto sera para vincular al DIV llamado texto
Anuncios

El siguiente paso sera vincular a la variable texto con el DIV llamado texto mediante el metodo getElementById, pasemos a hablar de cada una de las funciones, comencemos con la primera:

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

Esta funcion simplemente incrementa al valor de i y lo escribira en el DIV por medio de la asociacion con la variable texto, pasemos con otra funcion:

function iniciar()
{
	i = 0;
	x = setInterval(sumar, 1000);
	y = setTimeout(detener, 10000);
}
Anuncios
Anuncios

Esta sera la funcion encargada de iniciar todo, y sera la asociada al boton Iniciar, observen que establece un valor inicial para i, el cual sera incrementado por sumar, luego asignaremos a la variable x el intervalo de 1 segundo para llamar a sumar, y por ultimo asignamos a la variable y el tiempo de espera por medio de setTimeout y estableceremos una espera de 10 segundos, recuerden que siempre es en milisegundos, para llamar a la funcion detener, pasemos a hablar sobre esta:

function detener()
{
	clearInterval(x);
	texto.innerHTML = "Se termino el tiempo!";
}
Anuncios

Esta funcion primero limpiara el intervalo que asignamos en x y luego escribira un mensaje notificando la detencion por medio de texto, pasemos a hablar sobre la ultima funcion que nos queda:

function desactivar()
{
	clearTimeout(y);
}
Anuncios

Esta funcion sera para desactivar el timeout que establecimos en y, y sera la accion asociada al boton de desactivar timeout, con todo esto comentado vamos a ver como funciona mediante el siguiente video

Anuncios

Como pueden ver si iniciamos nuestro codigo, este contara hasta 10 y finalizara porque pusimos un timeout de 10 segundos, cuando lo volvimos a iniciar pero luego usamos el boton para desactivarlo notamos que no termino a los 10 segundos sino que continuo.

Anuncios

En resumen, hoy hemos visto a setTimeout y clearTimeout, que son, como se componen, como trabajan, despues vimos un ejemplo para poder ponerlo en practica, 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
pp258

Donación

Es para mantenimento del sitio, gracias!

$1.50