setTimeOut, setInterval, requestAnimationFrame.
APRENDERAPROGRAMAR.COM
EJEMPLO RELOJ
JAVASCRIPT.
SETTIMEOUT,
CLEARTIMEOUT,
SETINTERVAL, REQUEST
ANIMATIONFRAME.
(CU01164E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
Fecha revisin: 2029
Resumen: Entrega n64 del Tutorial bsico JavaScript desde cero.
aprenderaprogramar.com, 2006-2029
Autor: Csar Krall
setTimeOutt, setInterval, requestAnimatiionFrame.
TIMERS JA
AVASCRIPT
Adems de
d Date en JaavaScript disponemos dee otros objetos y mtodo
os que nos peermiten realizar tareas
relacionad
das con el tiempo. En co
oncreto el ob
bjeto global window disp
pone de variios mtodoss pensados
para ejecu
utar una fun
ncin con un cierto retard
do, o peridicamente co
on cierto inteervalo de tiem
mpo entre
cada ejecucin.
TIMERS: SETTIMEOUT
S
T, SETINTERV
VAL, REQUESSTANIMATIO
ONFRAME
Normalmente el cd
digo JavaScript se ejecu
uta secuenccialmente, pero existen funciones especiales
denominaadas timers que permiteen estableceer la ejecuci
n de funcio
ones en determinados momentos
m
del tiempo.
ndow (por tanto
t
se pueden invocaar usando
Los timerrs son funciones predeefinidas del objeto win
Funcion().
window.n
nombreDeLaFuncion() o simplemen
nte usando nombreDeLa
n
SIN
NTAXIS TIMER
UTILIDAD
EJEMPLOS apreenderaprogramar.com
var
reeferenciaTimeer
=
setTimeout(nombreFuncion,
tiempoMiliseg);
La funcin nombreFuncio
n
on se
ejeecutar con un retrasso de
tieempoMiliseg respecto a lo
l que
serra su ejecuci
n natural.
var ejecT = setTimeout(mostrarAlerta,
5000);
* Para funcin sin parm
metros
var
reeferenciaTimeer
=
setTimeout(function()
{nombreFu
uncion (par1, par2, ,
parN)},tiem
mpoMiliseg);
* Para funcin con parmetros
clearTimeO
Out(referenciaaTimer)
var
reeferenciaTimeer
=
setIntervall(nombreFunccion(par
parN),
1,
parr2,
tiempoMiliseg);
* Para funcin sin parm
metros
La funcin nombreFuncio
n
on se
ejeecutar con un retrasso de
tieempoMiliseg respecto a lo
l que
serra su ejecuci
n natural.
Deetiene la ejeccucin progrramada
po
or referenciiaTimer me
ediante
settTimeOut (si se
s ejecuta antes del
tieempo program
mado)
Ejeecuta peridicamente la funcin
f
no
ombreFuncion
n con un inttervalo
de
entre
ejeecuciones
tieempoMiliseg.
aprenderraprogramar.co
om, 2006-2029
//mostrarAlerta se
undos de retraso
segu
ejecutaa
con
var control = setTimeout(function()
nodosTituloCu
urso,
{ejemploAccion(n
contador,
nodosCambiadoss,
tocaaCambiar)}, 15
500);
//Laa funcin se ejecuta con
n 1.5 s de
retrraso
cleaarTimeOut(ejeecT)
setInterval(mostrrarAlerta, 500
00);
//mostrarAlerta
se
ejecuta
periidicamente ccada 5 segund
dos
setTimeOut, setInterval, requestAnimationFrame.
SINTAXIS TIMER
var
referenciaTimer
=
setInterval(function()
{nombreFuncion(par1, par2,
parN)}, tiempoMiliseg);
UTILIDAD
EJEMPLOS aprenderaprogramar.com
Ejecuta peridicamente la funcin
nombreFuncion con un intervalo
entre
ejecuciones
de
tiempoMiliseg.
var t = setInterval(function(){reloj('Chile')
},2000);
* Para funcin con parmetros
clearInterval(referenciaTimer)
var
referenciaTimer
=
requestAnimationFrame(nomb
reFuncion)
* Para funcin sin parmetros
var
referenciaTimer
=
requestAnimationFrame(functi
on(){nombreFuncion(par1,
par2, , parN)});
//reloj se ejecuta peridicamente cada 2
s
Detiene la ejecucin programada
por referenciaTimer mediante
setInterval
clearInterval(ejecT)
Crea un bucle de repintado
delegando el control del mismo en
el navegador.
globalID
=
requestAnimationFrame(animacionRepet
imos);
Crea un bucle de repintado
delegando el control del mismo en
el navegador.
globalID
=
requestAnimationFrame(function(){anim
acionRepetimos('estiloDivertido')});
Detiene la ejecucin programada
por referenciaTimer mediante
RequestAnimationFrame.
Ver ejemplo ms abajo
* Para funcin con parmetros
cancelAnimationFrame(referen
ciaTimer)
Escribe este cdigo y comprueba sus resultados:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function alertaTras5seg() { setTimeout(mostrarAlerta, 5000); }
function mostrarAlerta() {alert('Han pasado 5 segundos desde la carga de la pgina');}
</script>
</script></head>
<body onload="alertaTras5seg()" >
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
</body></html>
El resultado esperado es que cuando transcurran 5 segundos desde la carga de la pgina se muestre el
mensaje Han pasado 5 segundos desde la carga de la pgina.
Si queremos introducir la repeticin peridica de la ejecucin de la funcin podemos escribir una
llamada con setTimeOut dentro de la propia funcin. Por ejemplo:
aprenderaprogramar.com, 2006-2029
setTimeOut, setInterval, requestAnimationFrame.
function mostrarAlerta() {
alert('Han pasado 5 segundos');
setTimeout(mostrarAlerta, 5000);
}
Har que se repita peridicamente la alerta indicando que han pasado 5 segundos.
Aunque si se quiere una repeticin peridica ser ms cmodo usar setInterval:
function alertaTras5seg() {setInterval(mostrarAlerta, 5000);}
REQUESTANIMATIONFRAME
Tradicionalmente los efectos de progresin o animacin incremental con JavaScript se lograban con un
cdigo de este tipo:
setInterval(function() { // Cdigo a ejecutar}, 1000/60);
Con este cdigo se lograba ejecutar 60 repintados por segundo de una funcin que por ejemplo iba
dibujando una lnea. Esta cadencia daba lugar a que pareciera que la lnea se dibujaba progresivamente.
A partir de cierto momento, se introdujo una forma de crear estos efectos (puede que no funcione en
algunas versiones de navegadores) que trataba de trasladar el control de la cadencia de la animacin al
propio navegador con varios objetivos:
a) Permitir que el navegador detuviera el proceso en una pestaa si esta pasaba a estar inactiva
(dejando as de consumir recursos).
b) Permitir que el navegador optimizara el redibujado, optimizando los recursos y evitando bloqueos.
c) Buscar un menor consumo de energa (CPU).
Algunos programadores adoran requestAnimationFrame y otros lo ignoran o simplemente no lo usan.
El esquema bsico para trabajar con requestAnimationFrame es el siguiente:
var globalID;
function animacionRepetimos() {
//Cdigo a ejecutar
globalID = requestAnimationFrame(animacionRepetimos);
}
function detener() { cancelAnimationFrame(globalID);}
La animacin comienza cuando se invoca a una funcin a la que hemos denominado (a modo de
ejemplo) animacionRepetimos. Dentro de esta funcin existe una llamada recursiva que da lugar a que
aprenderaprogramar.com, 2006-2029
setTimeOut, setInterval, requestAnimationFrame.
el navegador ejecute el repitando peridico ejecutando previamente la funcin. La funcin puede ser
detenida usando cancelAnimationFrame(nombreDelIdentificadorEmpleado);
Ejecuta este cdigo y comprueba sus resultados (ten en cuenta que en algunos navegadores puede no
funcionar, especialmente si son ms antiguos):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
button {margin:10px;}
#cabecera{position:absolute; color:white; margin:5px; font-family:verdana, arial;}
.relleno { width: 5px; height: 20px; background: black; float: left;}
</style>
<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.oRequestAnimationFrame;
var globalID;
function animacionRepetimos() {
var nuevoDiv = document.createElement("div");
document.getElementById('oculto').appendChild(nuevoDiv);
nuevoDiv.innerHTML='<div class="relleno" \> </div>';
globalID = requestAnimationFrame(animacionRepetimos);
}
function empezar() {globalID = requestAnimationFrame(animacionRepetimos);}
function detener() { cancelAnimationFrame(globalID);}
</script></head>
<body >
<button id="start" onclick="empezar()">Empezar</button><button id="stop" onclick = "detener()">Detener</button>
<div id="oculto"></div>
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
</body></html>
El resultado esperado es que una el color negro se vaya extendiendo de izquierda a derecha rellenando
lneas (al acumularse div de fondo negro) sobre la pantalla haciendo visible el texto blanco que no se
desplaza por tener la propiedad CSS position: absolute;
aprenderaprogramar.com, 2006-2029
setTimeOut, setInterval, requestAnimationFrame.
CREAR UN RELOJ CON JAVASCRIPT
Con las herramientas de que disponemos estamos en disposicin de crear un reloj con JavaScript.
Ejecuta este cdigo y comprueba sus resultados (ten en cuenta que en algunos navegadores puede no
funcionar, especialmente si son ms antiguos):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
function reloj() {
var hoy=new Date(); var h=hoy.getHours(); var m=hoy.getMinutes(); var s=hoy.getSeconds();
m = actualizarHora(m); s = actualizarHora(s);
document.getElementById('displayReloj').innerHTML = h+":"+m+":"+s;
var t = setTimeout(function(){reloj()},500);
}
function actualizarHora(i) {
if (i<10) {i = "0" + i}; // Aadir el cero en nmeros menores de 10
return i;
}
</script>
</script>
</head>
<body onload="reloj()" >
<div style="text-align:center;">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" > </div>
</div>
</body>
</html>
El resultado esperado es que se muestre un reloj marcando los segundos.
aprenderaprogramar.com, 2006-2029
setTimeOut, setInterval, requestAnimationFrame.
EJERCICIO 1
Crea un reloj JavaScript que marque los segundos usando el mtodo setInterval.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
EJERCICIO 2
Crea un reloj JavaScript que marque los segundos usando el mtodo requestAnimationFrame.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
EJERCICIO 3
Crea un reloj JavaScript que marque inicialmente 01:00 (es decir, 1 minuto) y que marche hacia atrs
(00:59, 00:58, 00:57 etc.) hasta llegar a 00:00. Cuando llegue a 00:00 debe deternerse y mostrar el
mensaje: Tu tiempo ha terminado.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
Prxima entrega: CU01165E
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206
aprenderaprogramar.com, 2006-2029
