Tag Archive for intervalo de tiempo

Control de tiempo usando setInterval() – practica Cronometro en JavaScript

Bienvenidos a otra publicación estimados lectores. Esta ocasión veremos la función setInterval, que nos sirve para realizar control de tiempo en javascript. Esto quiere decir, ejecutar una pieza de codigo cada determinado tiempo, de manera que podemos aprovecharlo para hacer una aplicación tan sencilla como un cronometro para comprender mejor su funcionamiento.

Implementación de setInterval()

setInterval es una función del objeto window, y consta de 2 parametros principalmente, su uso mas basico el el siguiente, donde el primer parametro describe una funcion anonima que contiene el codigo a ejecutar cada cierto tiempo, y el segundo parametro es el tiempo en milisegundos que separa cada intervalo de ejecución.

//Forma 1
setInterval(function(){/* codigo a ejecutar*/}, time);
/*donde time es el tiempo en milisegundos*/

//Forma 2 (usando window)
window.setInterval(function(){/* codigo a ejecutar*/}, time);

Para destruir el intervalo de tiempo basta con usar la funcion clearInterval() el usarla sin especificar parametros detendra el funcionamiento de los procesos que actualmente se esten ejecutando por medio de una funcion de setInterval.

En el siguiente ejemplo veremos como hacer un cronometro en el que usamos esta función para contar minutos y segundos, y que podemos detenerla usando un identificador en la funcion de setInterval y clearInterval. Solo es necesario copiar y pegar en un archivo html.

Codigo fuente ejemplo de cronometro de minutos y segundos

<!DOCTYE html>
<html>
<head>
	<script type="text/javascript">
	//setInterval
	var cronometro;

	function detenerse()
	{
		clearInterval(cronometro);
	}

	function carga()
	{
		contador_s =0;
		contador_m =0;
		s = document.getElementById("segundos");
		m = document.getElementById("minutos");

		cronometro = setInterval(
			function(){
				if(contador_s==60)
				{
					contador_s=0;
					contador_m++;
					m.innerHTML = contador_m;

					if(contador_m==60)
					{
						contador_m=0;
					}
				}

				s.innerHTML = contador_s;
				contador_s++;

			}
			,1000);

	}

	</script>
</head>
<body onload="carga()">
	<p>
		<span id="minutos">0</span>:<span id="segundos">0</span>
	</p>
	<input type="button" onclick="detenerse()" value="deternse"/>
</body>
</html>