lunes, 28 de mayo de 2012

Timer con setTimeout jQuery

Timer con setTimeout jQuery

setTimeout es una función propia de Javascript, pero esta función unida a la capacidad de Jquery puede hacer cosas muy interesantes.

setTimeout tiene dos parámetros la función que será llamada y el tiempo en milísegundos para hacer la llamada.

setTimeout("funcion()", milisegundos);

Para conseguir hacer un loop mediante esta función hay que integrar dentro de la misma función, a la función setTimeout, porque de no ser así al finalizar el intervalo se detendría.

var milisegundos = 10000;

timer = setTimeout("tiempo()", milisengundos);

function tiempo() {
//Instrucciones
timer = setTimeout("tiempo()", milisengundos);
}

Igualmente para detener a la función setTimeout existe la función clearTimeout(timer).

El siguiente ejemplo consiste en un loop, en el cual las dos cajas son movidas por efectos proporcionados por Jquery...




El código del ejemplo es el siguiente...
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<script type="text/javascript">

timer = setTimeout('temporizador()', 4000);

function temporizador() {
$(document).ready(function() {
$("#caja1").slideUp(1500).delay(1000).fadeIn(1500);
$("#caja2").slideUp(1500).delay(2000).fadeIn(1500, function(){
timer = setTimeout("temporizador()", 2000);
});
});
}
</script>
</head>
<body>
<div id="caja1" style="width:50px; height:50px; background: green">
</div>
<div id="caja2" style="width:50px; height:50px; background: red">
</div>
</body>
</html>




2 comentarios:

Unknown dijo...

Gracias por la información. Muy útil.

Anónimo dijo...

Hola a todos.

¿Se les ocurre alguna forma para introducir un retardo (delay) en una subclase como focus o active?