Gestion du temps et animation en javascript
Méthode setTimeout
La méthode setTimeout()
permet d'exécuter une fonction une
seule fois après un intervalle de temps spécifié:
- Code:Select all
setTimeout(function,delay);
function
après delay
millisecondes
(1000 ms = 1s…).
Remarque: L'appel de la fonction
function
est effectué après delay
ms,
en particulier avec la valeur à ce moment là des éventuelles variables utilisées dans
la fonction.
Par exemple:
- Code:Select all
a=0;
setTimeout(function() {alert(a);},5000);
a=1;
Méthode clearTimeout
Afin d'arrêter l'exécution de setTimeout
, lorsque celle-ci a déjà
été appelé et est donc en attente,
on peut utiliser la méthode clearTimeout
.
- Code:Select all
<div>
<div id="text_timeout"></div>
<button onclick="function_timed_out();">Start'n wait 10s</button>
<button onclick="stop_function_timed_out();">Oh no, stop this !</button>
</div>
<script>
var sT=new Array;
function function_timed_out() {
cpt=10;
sTg=setTimeout(function() {
document.getElementById("text_timeout").innerHTML="TATA NaNa ...!! Les 10s sont écoulées"}
,(cpt+1)*1000);
for (i=0;i<cpt;i++) {
sT[i]=setTimeout(function() {
document.getElementById("text_timeout").innerHTML="Attention, plus que "+cpt+"s";cpt--;}
,(cpt-i)*1000);
}
}
function stop_function_timed_out() {
clearTimeout(sTg); % arrêt du timer sTg
for (i=0;i<15;i++) {clearTimeout(sT[i]);} % arrêt des autres timers
document.getElementById("text_timeout").innerHTML="Ouf, arrêté à temps...";
}
</script>
- Affichage
-
Méthode setInterval
…
La méthode setInterval()
permet d'évaluer une expression
ou d'appeler une fonction à intervalle de temps régulier
Appuyez sur Start !
… et clearInterval
Deux exemples d'animation: clignotement et compte à rebours
Effet de clignotement
En combinant setInterval
et setTimeout
on
peut créer un effet de clignotement, ou d'affichage en alternance.
- Code:Select all
<div id="blink"
style="padding:2em 1.3em 2em 1.3em;border-radius:3em">
</div>
<script>
bl=document.getElementById("blink");
setInterval(function() {
bl.innerHTML=" red ";
bl.style.backgroundColor = "red";
setTimeout(function() {
bl.innerHTML="green";
bl.style.backgroundColor="green";
},1000);
},2000);
</script>
- Affichage:
-
Compte à rebours
Avec des setTimeout
en boucle
t=setTimeout()
retourne, dans t
, un nombre
représentant une ID d'identification de l'horloge lancée. C'est ce
nombre qui est appelé dans clearTimeout
.
On peut aussi générer une suite d'actions à exécuter, en indexant
les setTimeout
dans un vecteur:
- Code:Select all
<br>
<span id="countdown1"
style="background-color:red;font-size:20pt;
border-radius:2em;padding:.1em;padding-left:.4em;padding-right:.4em">
</span>
<br>
<button id="btn_countdown1" onclick="StartCountdown1();">Start countdown</button>
<button onclick="StopCountdown1();">Stop countdown</button>
<script>
var sT=new Array;
bl1=document.getElementById("countdown1"); % zone d'affichage
cptk=10; % cptk est la valeur du compteur qui sera affichée
function StartCountdown1() {
k=10-cptk;t=0;
while (k<10) {k++;
sT[k]=setTimeout(function() {
cptk--;bl1.innerHTML=cptk;
if (cptk==0) {bl1.style.backgroundColor="green";}
},t*1000);t++;
}
}
function StopCountdown1() {
for (i=0;i<11;i++)
{clearTimeout(sT[i]);} % On arrête tous les setTimeout
document.getElementById("btn_countdown1").innerHTML="Continue countdown";
}
</script>
- Affichage:
-
Avec un setTimeout
dans une fonction récursive
Pour décompter (ou compter d'ailleurs), on attend 1s, on retranche 1,
et on recommence.
Là réside justement le principe d'une fonction récursive,
c'est-à-dire qui s'appelle elle-même.
En voilà un exemple d'implémentation:
- Code:Select all
<span id="countdown2"
style="background-color:red;font-size:20pt;border-radius:2em;
padding:.1em;padding-left:.4em;padding-right:.4em;">
</span><br>
<button id="btn_countdown2" onclick="Countdown2();">
Start countdown</button>
<button onclick="StopCountdown2();">Stop countdown</button>
<script>
compteur=9;
function Countdown2() {
sT=setTimeout(function() {
if (compteur>0) {
document.getElementById("countdown2").innerHTML=compteur;compteur--;
Countdown2();
}
else {
document.getElementById("countdown2").style.backgroundColor="green";
document.getElementById("countdown2").innerHTML=compteur;
}
},1000 );
}
function StopCountdown2() {
clearTimeout(sT);
document.getElementById("btn_countdown2").innerHTML="Continue contdown";
}
</script>
- Affichage:
-
Avec setInterval
De même que précédemment, on répète en fait un certain nombre de fois
une action (retrancher 1 et afficher le compteur).
setInterval
sert justement à cela: on répète une fonction
toutes les secondes, sachant que cette fonction contient elle-même sa
fonction d'arrêt: clearInterval
.
- Code:Select all
<span id="countdown3"
style="background-color:red;font-size:20pt;border-radius:2em;
padding:.1em;padding-left:.4em;padding-right:.4em;">
</span>
<br>
<button id="btn_countdown3" onclick="StartCountdown3();">
Start countdown</button>
<button onclick="StopCountdown3();">Stop countdown</button>
<script>
cpt=9;
function StartCountdown3() {
sI=setInterval(function() {
if (cpt>0) {
document.getElementById("countdown3").innerHTML=cpt;cpt--;
}
else {
clearInterval(sI);
document.getElementById("countdown3").innerHTML="0";
document.getElementById("countdown3").style.backgroundColor="green";
}
},1000);
}
function StopCountdown3() {
clearInterval(sI);
document.getElementById("btn_countdown3").innerHTML="Continue countdown";
}
</script>
- Affichage:
-
Autres exemples d'animations
Deux exemples d'animation: clignotement et compte à rebours
Effet de clignotement
En combinantsetInterval
et setTimeout
on
peut créer un effet de clignotement, ou d'affichage en alternance.
- Code:Select all
<div id="blink"
style="padding:2em 1.3em 2em 1.3em;border-radius:3em">
</div>
<script> bl=document.getElementById("blink");
setInterval(function() {
bl.innerHTML=" red ";
bl.style.backgroundColor = "red";
setTimeout(function() {
bl.innerHTML="green";
bl.style.backgroundColor="green";
},1000);
},2000);
</script>
- Affichage:
Compte à rebours
Avec des setTimeout
en boucle
t=setTimeout()
retourne, dans t
, un nombre
représentant une ID d'identification de l'horloge lancée. C'est ce
nombre qui est appelé dans clearTimeout
.
On peut aussi générer une suite d'actions à exécuter, en indexant les
setTimeout
dans un vecteur:
- Code:Select all
<br>
<span id="countdown1"
style="background-color:red;font-size:20pt;
border-radius:2em;padding:.1em;padding-left:.4em;padding-right:.4em">
</span>
<br>
<button id="btn_countdown1" onclick="StartCountdown1();">Start countdown</button>
<button onclick="StopCountdown1();">Stop countdown</button>
<script>
var sT=new Array;
bl1=document.getElementById("countdown1"); % zone d'affichage
cptk=10; % cptk est la valeur du compteur qui sera affichée
function StartCountdown1() {
k=10-cptk;t=0;
while (k<10) {k++;
sT[k]=setTimeout(function() {
cptk--;bl1.innerHTML=cptk;
if (cptk==0) {bl1.style.backgroundColor="green";}
},t*1000);t++;
}
}
function StopCountdown1() {
for (i=0;i<11;i++) {clearTimeout(sT[i]);} % On arrête tous les setTimeout
document.getElementById("btn_countdown1").innerHTML="Continue countdown";
}
</script>
- Affichage:
-
Avec un setTimeout
dans une fonction récursive
Pour décompter (ou compter d'ailleurs), on attend 1s, on retranche 1,
et on recommence.
Là réside justement le principe d'une fonction récursive, c'est-à-dire qui s'appelle elle-même.
En voilà un exemple d'implémentation:
- Code:Select all
<span id="countdown2"
style="background-color:red;font-size:20pt;border-radius:2em;
padding:.1em;padding-left:.4em;padding-right:.4em;">
</span><br>
<button id="btn_countdown2" onclick="Countdown2();">
Start countdown</button>
<button onclick="StopCountdown2();">Stop countdown</button>
<script>
compteur=9;
function Countdown2() {
sT=setTimeout(function() {
if (compteur>0) {
document.getElementById("countdown2").innerHTML=compteur;compteur--;
Countdown2();
}
else {
document.getElementById("countdown2").style.backgroundColor="green";
document.getElementById("countdown2").innerHTML=compteur;
}
},1000 );
}
function StopCountdown2() {
clearTimeout(sT);
document.getElementById("btn_countdown2").innerHTML="Continue contdown";
}
</script>
- Affichage:
-
Avec setInterval
De même que précédemment, on répète en fait un certain nombre de fois
une action (retrancher 1 et afficher le compteur).
setInterval
sert justement à cela: on répète une fonction
toutes les secondes, sachant que cette fonction contient elle-même sa
fonction d'arrêt: clearInterval
.
- Code:Select all
<span id="countdown3"
style="background-color:red;font-size:20pt;border-radius:2em;
padding:.1em;padding-left:.4em;padding-right:.4em;">
</span> <br>
<button id="btn_countdown3" onclick="StartCountdown3();">
Start countdown</button>
<button onclick="StopCountdown3();">Stop countdown</button>
<script>
cpt=9;
function StartCountdown3() {
sI=setInterval(function() {
if (cpt>0) {
document.getElementById("countdown3").innerHTML=cpt;cpt--;
}
else {
clearInterval(sI);
document.getElementById("countdown3").innerHTML="0";
document.getElementById("countdown3").style.backgroundColor="green";
}
},1000);
}
function StopCountdown3() {
clearInterval(sI);
document.getElementById("btn_countdown3").innerHTML="Continue countdown";
}
</script>
- Affichage:
-