- Detalles
- Por Juan Padial
- En Programación
- Visto: 6959
En javascript se pueden ejecutar acciones tras el transcurso de un cierto de tiempo, es lo que se llamar eventos temporales o timing events.
Para disparar los eventos de tiempo en javascript simplemente hay que usar uno de los dos métodos de los que se disponen:
- setTimeout() - ejecuta un código tras un determinado período de tiempo en el futuro.
- clearTimeout() - cancela setTimeout()
También están los métodos setInterval() y clearInterval() que funciona de forma análoga a los anteriores métodos y que se ejecutan cíclicamente.
- setInterval() - ejecuta un código cada cierto intervalo de tiempo de forma repetida
- clearInterval() - cancela setInterval()
Cualquier de estos métodos de javascript para ejecutar acciones en función del tiempo que utilices pueden verse afectadas por limitaciones de algunos navegadores ya que algunos tienen un intervalo de tiempo mínimo que puede variar desde los 25 a 75 milisegundos.
setTimeout()
Sintaxis
var t = setTimeout("codigo javascript",milisegundos);
El método setTimeout() devuelve un valor, en la sintaxis anterior este valor es almacenado en la variable t. El método setTimeout() tiene dos parámetros, el primero de ellos puede ser un código javascript ejecutable o la llamada a una función. El segundo parámetro es el tiempo en milisegundos (1 segundo tiene mil milisegundos) a contar desde que se llama al método setTimeout() hasta que se ejecuta el código puesto como primer parámetro. Es decir, se ejecutará el código especificado en el primer parámetro transcurrido el tiempo especificado en el segundo parámetro.
Siempre que se pueda, es mejor poner como primer parámetro de setTimeout() la referencia a una función más que una cadena de código ya que es más eficiente.
clearTimeout()
Sintaxis
clearTimeout(setTimeout_variable)
El método clearTimeout() cancela al objeto setTimeout() al que se hace referencia en el parámetro del método. Luego veremos unos ejemplos.
setInterval() y clearInterval()
Sintaxis
La sintaxis de los métodos setInterval() y clearInterval() es idéntica a la sintaxis de setTimeout() y clearTimeout(). La diferencia es que setInterval() ejecutará el código pasado al método de forma repetida a intervalos de tiempo del tamaño especificado.
Ejemplos de acciones y tiempo con javascript
Retrasar la ejecución de una función
<script type="text/javascript">
function temporizador() {
var t = setTimeout("alerta()",3000);
}
function alerta() {
alert("Hola cara de Bola!!");
}
</script>
Con el código anterior, cuándo llames a la función temporizador, se ejecutará la función alerta() transcurridos 3 segundos (3000 milisegundos) y una sola vez.
Ejecutar una función javascript repetidamente cada cierto tiempo
Si ejecutas este código se ejecutará la función alerta() cada 3 segundos.
<script type="text/javascript">
function temporizador() {
var t = setTimeout("alerta()",3000);
}
function alerta() {
alert("Hola cara de Bola!!");
}
</script>
Cancelar los eventos de tiempo
Como se señaló anteriormente, los métodos setTimeout() y setInterval() que ejecutan acciones javascript en función temporal, se cancelan mediante los métodos clearTimeout() y clearInterval() respectivamente. A estos métodos se le ha de pasar como parámetro el objeto setTimeout() o setInterval() que queremos cancelar.
Ejemplo
<html>
<body>
<input type="text" id="reloj" />
<script language=javascript>
var int = setInterval("reloj()",1000);
function reloj()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("reloj").value=t;
}
</script>
</form>
<button onclick="int=clearInterval(int)">Parar!!!</button>
</body>
</html>
Con este ejemplo se ejecutará la función reloj cada segundo repetidamente y añade la hora actual a un campo input. Al pulsar el botón se llama al método clearInterval() al que se le pasa la variable int que contiene el objeto setInterval que queremos parar.
Creado el 05 12 2011 Actualizado el 05 12 2011
