Les fonctions temporelles

Parent Previous Next



Les fonctions temporelles



Nous avons vu comment travailler avec les dates et l'heure, mais malgré ça il nous est toujours impossible d'influencer le délai d'exécution de nos scripts pour permettre, par exemple, la création d'une animation. C'est là que les fonctions setTimeout() et setInterval() interviennent : la première permet de déclencher un code au bout d'un temps donné, tandis que la seconde va déclencher un code à un intervalle régulier que vous aurez spécifié.


Utiliser setTimeout() et setInterval()

Avec un simple appel de fonction


Ces deux fonctions ont exactement les mêmes paramètres : le premier est la fonction à exécuter, le deuxième est le temps en millisecondes.

Concernant le premier paramètre, il y a trois manières de le spécifier :


setTimeout(myFunction, 2000); // myFunction sera exécutée au bout de 2 secondes


setTimeout(function() {

    // Code…

}, 2000);


setTimeout('myFunction()', 2000);


En ce qui concerne le deuxième paramètre, il n'y a pas grand-chose à dire mis à part qu'il s'agit du temps à spécifier (en millisecondes) à votre fonction. Une bonne chose à savoir c'est que ce temps n'a que peu d'intérêt à être en dessous de 10 ms (environ, cela dépend des navigateurs !) pour la simple et bonne raison que la plupart des navigateurs n'arriveront pas à exécuter votre code avec un temps aussi petit. En clair, si vous spécifiez un temps de 5 ms, votre code sera probablement exécuté au bout de 10 ms.

Faites attention avec la fonction setTimeout(), il n'y a pas de « o » majuscule. C'est une erreur très fréquente !


Avec une fonction nécessitant des paramètres


Admettons que vous souhaitiez passer des paramètres à la fonction utilisée avec setTimeout() ousetInterval(), comment allez-vous faire ?


C'est bien simple, nos deux fonctions temporelles possèdent toutes les deux deux paramètres, mais en vérité il est possible d'en attribuer autant que l'on veut. Les paramètres supplémentaires seront alors passés à la fonction appelée par notre fonction temporelle, exemple :

setTimeout(myFunction, 2000, param1, param2);


Ainsi, au terme du temps passé en deuxième paramètre, notre fonction myFunction() sera appelée de la manière suivante :

myFunction(param1, param2);


Cependant, cette technique ne fonctionne pas sur les vieilles versions d'Internet Explorer, il nous faut donc ruser :

setTimeout(function() {

 

    myFunction(param1, param2);

 

}, 2000);


Nous avons créé une fonction anonyme qui va se charger d'appeler la fonction finale avec les bons paramètres, et cela fonctionne sur tous les navigateurs !


Annuler une action temporelle


Il se peut que vous ayez parfois besoin d'annuler une action temporelle. Par exemple, vous avez utilisé la fonction setTimeout() pour qu'elle déclenche une alerte si l'utilisateur n'a pas cliqué sur une image dans les dix secondes qui suivent. Si l'utilisateur clique sur l'image il va alors vous falloir annuler votre action temporelle avant son déclenchement, c'est là qu'entrent en jeu les fonctions clearTimeout() etclearInterval(). Comme vous pouvez vous en douter, la première s'utilise pour la fonctionsetTimeout() et la deuxième pour setInterval()

Ces deux fonctions prennent toutes les deux un seul argument : l'identifiant de l'action temporelle à annuler. Cet identifiant (qui est un simple nombre entier) est retourné par les fonctions setTimeout() etsetInterval().


Voici un exemple logique :

<button id="myButton">Annuler le compte à rebours</button>

 

<script>

  (function() {

     

      var button = document.getElementById('myButton');

     

      var timerID = setTimeout(function() { // On crée notre compte à rebours

          alert("Vous n'êtes pas très réactif vous !");

      }, 5000);

     

      button.onclick = function() {

          clearTimeout(timerID); // Le compte à rebours est annulé

          alert("Le compte à rebours a bien été annulé."); // Et on prévient l'utilisateur

      };

     

  })();

</script>



On peut même aller un peu plus loin en gérant plusieurs actions temporelles à la fois :

<button id="myButton">Annuler le compte à rebours (5s)</button>

 

<script>

  (function() {

     

      var button = document.getElementById('myButton'),

          timeLeft = 5;

     

      var timerID = setTimeout(function() { // On crée notre compte à rebours

          clearInterval(intervalID);

          button.innerHTML = "Annuler le compte à rebours (0s)";

          alert("Vous n'êtes pas très réactif vous !");

      }, 5000);

     

      var intervalID = setInterval(function() { // On met en place l'intervalle pour afficher la progression du temps

          button.innerHTML = "Annuler le compte à rebours (" + --timeLeft + "s)";

      }, 1000);

     

      button.onclick = function() {

          clearTimeout(timerID); // On annule le compte à rebours

          clearInterval(intervalID); // Et l'intervalle

          alert("Le compte à rebours a bien été annulé.");

     };

     

  })();

</script>



Mise en pratique : les animations !

Venons-en maintenant à une utilisation concrète et courante des actions temporelles : les animations ! Tout d'abord, qu'est-ce qu'une animation ? C'est la modification progressive de l'état d'un objet. Ainsi, une animation peut très bien être la modification de la transparence d'une image à partir du moment où la transparence est faite de manière progressive et non pas instantanée.


Concrètement, comment peut-on créer une animation ? Reprenons l'exemple de la transparence : on veut que notre image passe d'une opacité de 1 à 0,2.

<img id="myImg" src="..." style="opacity: 1" />

 

<script>

  var myImg = document.getElementById('myImg');

 

  myImg.style.opacity = 0.2;

</script>


Le problème ici, c'est que notre opacité a été modifiée immédiatement de 1 à 0,2. Nous, nous voulons que ce soit progressif, il faudrait donc faire comme ceci :

var myImg = document.getElementById('myImg');

 

for (var i = 0.9 ; i >= 0.2 ; i -= 0.1) {

      myImg.style.opacity = i;

}


Mais encore une fois, tout s'est passé en une fraction de seconde ! C'est là que les actions temporelles vont entrer en action et ceci afin de temporiser notre code et de lui laisser le temps d'afficher la progression à l'utilisateur ! Dans notre cas, nous allons utiliser la fonction setTimeout() :

var myImg = document.getElementById('myImg');

 

function anim() {

 

    var s = myImg.style,

        result = s.opacity = parseFloat(s.opacity) - 0.1;

   

    if ( result > 0.2 ) {

        setTimeout(anim, 50); // La fonction anim() fait appel à elle-même si elle n'a pas terminé son travail

    }

 

}

 

anim(); // Et on lance la première phase de l'animation



Et voilà, cela fonctionne sans problème et ce n'est pas aussi compliqué qu'on ne le pense au premier abord ! Alors après il est possible d'aller bien plus loin en combinant les animations, mais, maintenant que vous avez les bases, vous devriez être capables de faire toutes les animations dont vous rêvez !


Vous remarquerez que nous avons utilisé la fonction setTimeout() au lieu de setInterval() pour réaliser notre animation. Pourquoi donc ? Eh bien il faut savoir que setTimeout() est en fait bien plus « stable » que setInterval(), ce qui fait que vous obtenez des animations bien plus fluides. Dans l'ensemble, mieux vaut se passer de setInterval() et utiliser setTimeout() en boucle, quel que soit le cas d'application.


En résumé



Créé avec HelpNDoc Personal Edition: Générateur de documentations PDF gratuit

Site à deux balles