Temporizadores en JavaScript

What's up!

Desde hace tiempo había querido escribir este tutorial pero no me había sido posible. En fin, al punto. En esta ocasión compartiré con ustedes unos métodos simples, pero bastante útiles de JavaScript. Se trata nada más y nada menos que de setInterval(), que sirve para ejecutar una función infinitamente cada x milisegundos y setTimeout() que ejecuta una función una sola vez después de x milisegundos.

¿No quedó claro? Veámoslo un poco más a fondo.

Sintaxis: setInterval(function,milliseconds,lang) / setTimeout(function,milliseconds,lang)

Ejemplo: Supongamos que tenemos 2 botones y un div.

<button onclick="interval()">Interval</button> <button onclick="timeout()">Timeout</button> <div id="testdiv"></div>

Con sus respectivas funciones.

var t; function interval(){ t=1; setInterval(function(){ document.getElementById("testdiv").innerHTML=t++; },1000,"JavaScript"); } function timeout(){ setTimeout(function(){ document.getElementById("testdiv").innerHTML="Pasaron 2 segundos antes de que pudieras ver esto."; },2000,"JavaScript"); }

El primer botón escribirá en el div el valor de t infinitamente cada 1000 ms. El segundo mostrará un mensaje en el mismo div que aparecerá después de 2000 ms.

¿Qué pasa si presiono el primer botón y después el segundo botón? Algo raro, por supuesto. Hacer clic en el segundo botón no detendrá la ejecución del setInterval() inicial.

Para detener la ejecución del código del primer botón se usa la función clearInterval() pero para poder hacer eso hay que modificar un poco el código anterior quedando algo así:

var inter,t; function interval(){ t=1; inter=setInterval(function(){ document.getElementById("testdiv").innerHTML=t++; },1000,"JavaScript"); } function timeout(){ clear(); setTimeout(function(){ document.getElementById("testdiv").innerHTML="Pasaron 2 segundos antes de que vieras esto."; },2000,"JavaScript"); } function clear(){ clearInterval(inter); }

Ahora, al hacer clic en el segundo botón, la ejecución de interval() se detendrá y no pasará nada indeseado.

setTimeout() también tiene una función que detiene su ejecución; clearTimeout(). Ésta función, al igual que la anterior, requiere guardar el setTimeout() en una variable para poder usarla como parámetro.

Ejemplo: Supongamos que hay un botón que después de 10 segundos mágicamente apagará el computador, hacemos clic pero después de 5 segundos nos arrepentimos. ¿Qué hacemos? Fácil, usamos clearTimeout(). Veámos cómo.

<button onclick="apagar()">Apagar</button> <button onclick="cancelar()">Cancelar</button> <div id="testdiv"></div>var timout; function apagar(){ document.getElementById("testdiv").innerHTML="En 10 segundos se apagará el computador."; timout=setTimeout(function(){ document.getElementById("testdiv").innerHTML="Computador apagado."; },10000,"JavaScript"); } function cancelar(){ clearTimeout(timout); document.getElementById("testdiv").innerHTML="Operación cancelada."; }

Eso sería todo, gracias a todos por leer. Si quieren el código usado en este tutorial está disponible para todos en DropBox y Drive. Saludos.