martes, 29 de mayo de 2012

timer con setInterval en Jquery

timer con setInterval en Jquery

setInterval es una función propia de Javascript, su funcionamiento es crear un intervalo de tiempo en milisegundos que no se dentendrá hasta no haber hecho una llamada a la función clearInterval.

setInterval("funcion()", milisegundos);

Vamos a ver un ejemplo en el cual hay dos botones uno START y otro STOP, al hacer click en el botón START entrará en funcionamiento setInterval y tendremos un número que se irá incrementando por cada intervalo de tiempo, y con el botón STOP entrará en funcionamiento la función clearInterval que detendrá el timer.




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">
var milisegundos = 1000;
var x = 0;
$(document).ready(function() {
$(":button#start").bind("click", function() {
timer = setInterval('temporizador()', milisegundos);
});
$(":button#stop").bind("click", function() {
timer = clearInterval(timer);
});
});
function temporizador() {
$(document).ready(function() {
$("#caja").html("<h1>
"+x+"<h1>
");
});
x++;
}
</script>
</head>

<body>
<input type="button" id="start" value="START">
<input type="button" id="stop" value="STOP">
<div id="caja">
</div>
</body>

</html>