La función setTimeout y setInterval permiten pasar como primer
parámetro el nombre de una función que se ejecutará después de una
determinada cantidad de milisegundos que le pasamos en el segundo
parámetro. La única diferencia entre estas funciones es que si llamamos a
setInterval la función se ejecutará en forma repetida cada vez que pase
dicha cantidad de milisegundos, en cambio con setTimeout solo llamará
la función una única vez.
Estas dos funciones retornan un valor que será de utilidad si necesitamos eliminar la llamada a la función.
Problema
Mostrar un cronómetro que comience en cero y se incremente en uno cada
vez que pase un segundo. Disponer un botón para poder detener o
reiniciar el cronómetro.
<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript">
window.addEventListener('load', inicio, false);
var reloj;
function inicio() {
reloj=setInterval(procesar,1000);
document.getElementById('boton1').addEventListener('click',presionBoton,false);
}
function procesar()
{
var nro=parseInt(document.getElementById('cronometro').innerHTML);
nro++;
document.getElementById('cronometro').innerHTML=nro;
}
function presionBoton()
{
if (document.getElementById('boton1').value=='detener')
{
clearInterval(reloj);
document.getElementById('boton1').value='continuar';
}
else
{
reloj=setInterval(procesar,1000);
document.getElementById('boton1').value='detener';
}
}
</script>
<style>
#cronometro {
font-size:50px;
color:#0a0;
}
</style>
</head>
<body>
<span id="cronometro">0</span>
<br>
<input type="button" id="boton1" value="detener">
</body>
</html>
Definimos una variable global que guarde la referencia del timer, en
la función inicio registramos la función que debe ejecutarse cada un
segundo (1000 milisegundos):
window.addEventListener('load', inicio, false);
var reloj;
function inicio() {
reloj=setInterval(procesar,1000);
document.getElementById('boton1').addEventListener('click',presionBoton,false);
}
La función procesar se ejecuta cada un segundo, siempre y cuando se
haya registrado esta función llamando a setInterval en la función
inicio. El objetivo de esta función es extraer el valor del cronómetro,
incrementarlo en uno y actualizarlo:
function procesar()
{
var nro=parseInt(document.getElementById('cronometro').innerHTML);
nro++;
document.getElementById('cronometro').innerHTML=nro;
}
La función presionBoton se ejecuta cada vez que lo presionamos y lo
que hacemos es controlar la etiqueta del botón para ver si dice
'detener' con lo que llamando a la función clearInterval esto hace que
se suprime la ejecución continua de la función procesar. Por el falso
del if procedemos a registrar nuevamente la función procesar:
function presionBoton()
{
if (document.getElementById('boton1').value=='detener')
{
clearInterval(reloj);
document.getElementById('boton1').value='continuar';
}
else
{
reloj=setInterval(procesar,1000);
document.getElementById('boton1').value='detener';
}
}
No hay comentarios.:
Publicar un comentario