Utilización de Timers en JavaScript

Ejecute una tarea periódicamente o en un tiempo dado

Introducción

En ocaciones, necesitamos ejecutar tareas periódicas, como por ejemplo actualizar información en nuestra página o verificar estado de algún elemento, donde contamos con la función setInterval(), que principalmente utiliza 2 parámetros:

función a llamar, la que puede ser dada por su nombre (no incluir los paréntesis, sino será una llamada a la función), o declarar una función anónima en linea como function () { ... }
Tiempo en milisegundos entre ejecuciones, considerando el tiempo desde que finaliza la ejecución de la función hasta la siguiente llamada

Tenemos casos donde queremos ejecutar una tarea solo una vez, o por ejemplo indicar que se agotó el tiempo para realizar una tarea o que va a expirar la sesión, En esos casos recurrimos a la función setTimeout()

Función setInterval()

Descripción

La función setTimeout() ejecuta la función dada como parámetro cada n milisegundos, lo que podemos detener con la función clearInterval():

var myTimer = setInterval( function () { ... } , miliseconds );
...
  if ( Condición ) {
    clearInterval(myTimer);
  }
...

La periodicidad se considera desde el momento en que termina la ejecución del script, por lo que podrán producirse algunas desincronizaciones, es decir, si tienes un contador que incrementas en cada ejecución, al llegar a 100 probablemente han trancurrido 101 segundos.

Ejemplo de setInterval()

El ejemplo clásico de agregar un reloj a nuestra página, que en rigor se basa en la hora definida en equipo cliente:

<html>
    <head>
        <title>Ejemplo de reloj</title>
    <script>
       miReloj = setInterval(actualizaReloj, 1000);

       function actualizaReloj() {
          var t = new Date();
          document.getElementById("reloj").innerHTML = t.toLocaleTimeString();
       }
    </script>
    <style>
        #relojcontainer {
            display: block;
            width: 300px;
            margin: 10px auto;
            padding: 6px;
            text-align: center;
            border: 2px solid navy;
        }
        #reloj {
            display: inline-block;
            font-size: 24px;
            color: navy;
            font-style: italic;
            padding: 6px;
            font-family: monospace;
        }
    </style>
    </head>
    <body>
        <div id="relojcontainer">
        <span id="reloj">00:00:00</span>
        <button onclick="clearInterval(miReloj)">Detener</button>
        </div>
    </body>
</html>

Con lo que veremos un reloj como:

00:00:00

Función setTimeout()

Descripción

La función setTimeout() ejecuta la función dada como parámetro por única vez en n milisegundos, lo que se puede cancelar con la función clearTimeout():

var myTimer = setTimeout( function () { ... } , miliseconds );
...
  if ( Condición ) {
    clearTimeout(myTimer);
  }
...

Ejemplo de setTimeout()

Cosideremos un botón que al presionar cambia su contenido, y se restituye a los 5 segundos:

<html>
    <head>
        <title>Ejemplo de Timer</title>
    
    </head>
    <body>
        <div id="timeoutcontainer" style="text-align: center;">
            <button id="btntimer" onclick="iniciaTimer();" style="font-size: 18px;padding: 6px 12px;">Presióname</button>
        </div>
    </body>
</html>

Con lo que veremos un botón como:

Javascript

Tiempo

Escrito por: Luis Hernán de la Barra, 16/10/2014

Si tiene interés por alguno de éstos servicios u otro similar, por favor llene el formulario de contacto

Generado por Sistema y almacenado en cache

Wyzer Luis Hernán de la Barra
Teléfono:	+56995451689
WhatsApp:	+56995451689
E-Mail:	info@wyzer.cl
Web:	www.wyzer.cl