SetTimeout et setInterval: Les délais en JavaScript

On peut en JavaScript déclencher des action après un intervalle de temps donné, ou de la répéter après un intervalle de temps.

Les méthodes setTimeout et setInterval sont des méthodes de l'objet Window. On peut donc écrire setTimeout ou window.setTimeout.
Ce sont des processus indépendants qui, quand ils sont lancés par une instruction, ne bloquent pas l'affichage du reste de la page ni les actions de l'utilisateur.

SetTimeout indique un délai avant exécution

Le méthode setTimeout définit une action à exécuter et un délai avant son exécution. Elle retourne un identifieur pour le processus. 

var x = setTimeout("instructions", délai en millisecondes).

Exemple:

function mafonction() { ... }

setTimeout(mafonction, 5000);

La fonction sera exécutée après 5 secondes (5 000 millisecondes).

Le délai commence à l'instant où setTimeout est exécutée par l'interpréteur JavaScript, donc à partir du chargement de la page si l'instruction est dans un script exécuté au chargement, où à partir d'une action de l'utilisateur si le script est déclenché par celui-ci.

ClearTimeout interrompt le décompte de setTimeout

Cette méthode interrompt le délai et l'exécution du code associé à ce délai. Le processus à supprimer est reconnu par l'identifieur retourné par setTimeout.

Syntaxe:

clearTimeout(identifieur);

Exemple:

var x = setTimeout(mafonction, 5000); 
...
clearTimeout(x);

setInterval déclenche une opération à intervalles réguliers

Similaire à setTimeout, elle déclenche répétitivement la même action à intervalles réguliers. 

setInterval("instructions", délai)

Exemple:

setInterval("alert(('bip')", 10000);

Affiche un message toutes les dix secondes.
L'action sera recommencée jusqu'à ce que l'on quitte la page ou que clearInterval soit exécutée.

clearInterval stoppe l'action de setInterval

Stoppe le processus déclenche par setInterval.

Exemple:

var x = setInterval(mafonction, 10000);
...
clearInterval(x);

Une fonction lambda peut être un argument

On peut définir une fonction dans les arguments de setTimeout ou setInterval.

Exemple:

var x = setTimeout(function() { alert("bip"); }, 2000);  

L'intérêt est surtout d'utiliser une fonction récursive ce que l'on peut faire en désignant la fonction par la variable: arguments.callee.

Démonstration

Nous allons utiliser setInterval pour afficher le décompte des secondes.

La fonction finish après 10 secondes affiche le message "TERMINE" et stoppe le décompte par un appel à clearInterval.

Cliquer sur le bouton pour commencer:

Code source:

<button onclick="start()">Lancer le décompte</button>
<div id="bip" class="display"></div>

<script>
var counter = 10;
var intervalId = null;
function finish() {
  clearInterval(intervalId);
  document.getElementById("bip").innerHTML = "TERMINE!";	
}
function bip() {
    counter--;
    if(counter == 0) finish();
    else {	
        document.getElementById("bip").innerHTML = counter + " secondes restantes";
    }	
}
function start(){
  intervalId = setInterval(bip, 1000);
}	
</script>

Autres démonstrations...

© 2010-2012 Xul.fr