Funciones setInterval, clearInterval, setTimeout y clearTimeout

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';
    }
  }

Retornar