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é:
setTimeout(function,delay);
exécute la fonction 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:
a=0;
setTimeout(function() {alert(a);},5000);
a=1;
affichera, au bout de 5s (=5000 ms), la valeur 1, et non pas 0.
L'appel de la fonction est programmé 5s plus tard, puis la lecture exécution du code se poursuit. 5s après la fonction est exécuté, avec tout le contexte, valeurs des variables, définition des fonctions, … à ce moment là.
Méthode clearTimeout
Afin d'arrêter l'exécution de setTimeout
, lorsque celle-ci a déjà été appelée et est donc en attente, on peut utiliser la méthode clearTimeout
.
<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>
Code javascript qui permet d'obtenir l'affichage/programme suivant : - 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.
<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>
Pouir obtenir l'affichage clignotant:
- 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, et qui peut ensuite être utilisé dans clearTimeout
.
On peut aussi générer une suite d'actions à exécuter, en indexant les setTimeout
dans un vecteur:
<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() {
% On arrête tous les setTimeout:
for (i=0;i<11;i++) {clearTimeout(sT[i]);}
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:
<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
.
<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.
<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>
Pouir obtenir l'affichage clignotant:
- 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, et qui peut ensuite être utilisé dans clearTimeout
.
On peut aussi générer une suite d'actions à exécuter, en indexant les
setTimeout
dans un vecteur:
<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() {
% On arrête tous les setTimeout:
for (i=0;i<11;i++) {clearTimeout(sT[i]);}
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:
<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
.
<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:
-