Páginas

miércoles, 25 de junio de 2014

JavaScript Window (BOM) The browser Object Model. 007. Timing Event. (Jugando con el tiempo)

Con JavaScript podemos ejecutar algún código específico de tiempo. 
Los dos métodos que usaremos son:

setInterval() Para ejecutar una función una y otra vez cada x tiempo.
setTimeout() Para ejecutar una función tras un tiempo x.
clearInterval() Para detener un intervalo.( clearTimeout(myVar) )

La sintaxys es parecida para ambos.
windows.setInterval("función", milisegundos);
o
setInterval("función", milisegundos);
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<p>Al clicar pasarán 3 segundos y aparecerá un popup</p>
<p>Cuando cierres el pop, pasarán 3 segundos y volverá a salir un nuevo Popup</p>
<p>Esto pasará hasta que cierres la ventana..</p>
<button onclick="setInterval(function(){alert('Hola!')},3000);">probar</button>
</body>
</html>
Al tener la posibilidad de actualizar una función pasado un intervalo podemos desarrollar un reloj aprovechando los métodos Dates*.

Ejemplo:
<!DOCTYPE html>
<html>
<body>
<p>Reloj</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
</body>
</html>
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<button onclick="myVar = setTimeout(function(){alert('Hello')},3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop</button>
</body>
</html>

No hay comentarios:

Publicar un comentario