précédent
Quelques exemples simples
suivant
4°/ Utilisation d'une minuterie (Timer)

Une autre fonctionalité interessante de Javascript est la possibilité d'utiliser simplement des minteries. Cela est très utile pour déclancher des fonctions au bout d'un certain temps. Cela se fait grâce à l'instruction :
MonTimer=setTimeout(Expression,Temps);

 
Expression indique une action, soit une fonction, soit une instruction. Temps est une variable numérique qui indique le temps (en milisecondes) au bout duquel l'action se déclanchera.MonTimer est le nom que vous donnerez à la minuterie.
clearTimeout(MonTimer);

 
Il est possible d'annuler une minuterie à l'aide de la fonction clearTimeout(). Elle s'utilise comme suit, MonTimer étant le nom que l'on avait donné à la minuterie.
Un petit exemple très simple : On va enclencher une minuterie pour que la page courante change au bout de 5 secondes lorsqu'on clique sur un lien. Pour changer l'Url de la page courante, on utilise l'instruction location.href="url". Le code est le suivant :
Dans l'entete de la page Html on mets :
<script>
<!--
function ZyVa() {
	setTimeout('location.href="exemple3.html"',5000)}
//-->
</script>
Le lien est :
<a href='javascript:ZyVa()'>CLIQUEZ ICI</a>

 
Pour essayer : CLIQUEZ ICI

 
On va ameliorer un peu le système en affichant le decompte des secondes. Il nous faut donc un endroit où écrire le decompte. Ceci n'est possible qu'a l'aide d'un champ de formulaire car seuls les champs de forulaire peuvent être modifié dynamiquement en Javascript (à moins de changer toute le page). On décrit ce champ de la manière suivante :
<form name=forme><input name=champ value=5 size=1></form>
On accède à la valeur de ce champ par document.forme.champ.value. Nous avons déjà vu l'objet document, celui-ci à comme proprieté forme, qui est un objet de type formulaire. Ce formulaire possède un objet champ qui a lui même une proprieté value qui represente le contenu de ce champ.
Au niveau traitement, nous allons créer une fonction Decompte() qui decrémentera le contenu du champ et si cette valeur est nulle, provoquera le changement de page. Cela donne ceci (à mettre dans l'entete de la page) :
<script>
<!--
function Decompte() {
    if (document.forme.champ.value == 0)
    {
        location.href="exemple3.html"
    }
    else
    {
        document.forme.champ.value = document.forme.champ.value - 1;
        MonTimer = setTimeout('Decompte()',1000);
    }
}
//-->
</script>

 
La première ligne est une ligne de test : On compare le contenu du champ avec 0. Le signe == indique une test d'égalité (Attention à bien doubler le signe, un simple signe est un signe d'affectation !!) Ensuite nous trouvons tout un bloc borné avec des accolades, c'est le bloc qui sera executé si le test est vrai. Le else precede le bloc qui sera executé si le test est faux. La première ligne qui suit le else décremente la valeur du champ. Le signe = indique une affectation. La partie à gauche de ce signe indique la valeur qui sera modifiée. La partie à droite indique l'opération a effectuer.
Donc notre fonction teste d'abord si le compteur est égal à zéro, si oui, on change de page, sinon, on décrémente le compteur et on réarme un timer pour que la fonction se réexecute dans une seconde.
 
Il faut faire maintenant le lien :
<a href='javascript:Decompte()'>CLIQUEZ ICI</a>
<a href='javascript:clearTimeout(MonTimer);'>Annuler</a>
J'ai rajouter un petit lien pour annuler les timers et arreter ainsi le precessus. Vous avez la possibilité de mettre la valeur que vous voulez dans le champ.
Et cela donne : CLIQUEZ ICI Annuler
Si vous avez tout compris, on peut passer à la suite de l'exposé
Dernière modif : 11 Mai 1998 Philippe Sarcher