Les méthodes setTimeout() et setInterval()

Voici deux fonctions très utiles qui permettent d'exécuter des fonctions dans un délai précisé en millisecondes.

setTimeout("MaFonction()",3000);
setTimeout(MaFonction,3000);

Exécutera MaFonction() dans trois secondes.

setInterval("MaFonction()",3000);
setInterval(MaFonction,3000);

Exécutera MaFonction() toutes les trois secondes.

Le premier paramètre est le nom de la fonction, le deuxième est le délai exprimé en millisecondes. Mettez des guillemets autour du nom de la fonction si vous l'écrivez avec ses parenthèses.

La méthode setTimeout()

Le code suivant propose un diaporama où les images défilent toutes les 2 secondes :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script>
        var tabImages = new Array(3);
        var numImage = 0;
        tabImages[0] = "snoopy.gif";
        tabImages[1] = "scoubidou.gif";
        tabImages[2] = "droopy.gif";

        function ChangeImage() {
            document.getElementById("serie").src = tabImages[numImage];
            if (numImage == 2) numImage = 0;
            else numImage++;
            setTimeout("ChangeImage()", 2000);
        }
    </script>
</head>

<body onload="ChangeImage()">
    <img id="serie" src="snoopy.gif">
</body>

</html>

Il faut remarquer qu’à la différence d’un simple gif animé, c’est le codeur qui contrôle le défilement.

Un autre exemple avec un titre grossissant d'un pixel chaque dixième de seconde :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		var toto=24;
		function gros() {
			if (toto<200) {
				toto++;
				document.getElementById("texte").style.fontSize=toto+"px";
				document.getElementById("texte").innerHTML=toto+"px";
				setTimeout("gros()",100)
			}
		}
		</script>
	</head>
	<body onload="gros()">
	<h1 id="texte" style="margin:0"></h1>
	</body>
</html>

La méthode setInterval()

Il est possible de programmer l’exécution d’une action à intervalles de temps constants.

Le code suivant est une variante du diaporama précédent. Notez au passage la façon différente d'enrichir le tableau tabimages :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		function changeimage() {
			document.getElementById("serie").src=tabimages[numimage];
			if (numimage==2) numimage=0;
			else numimage++;
		}
		var tabimages=new Array("hopper1.jpg","hopper2.jpg","hopper3.jpg");
		var numimage=1;
		</script>
	</head>
	<body>
		<img src="hopper1.jpg" id="serie">
		<script>
		setInterval(changeimage,1000);
		</script>
	</body>
</html>

Le code suivant provoque un clignotement régulier d’une ligne de texte. La couleur change tous les trois dixièmes de seconde :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>Bienvenue sur mon site</h1>
		<h2 id="disco">Le 2 août, soirée disco</h2>
		<script>
		function changecouleur() {
			if (document.getElementById("disco").style.color=='black')
				document.getElementById("disco").style.color='white';
			else
				document.getElementById("disco").style.color='black';
		}
		setInterval(changecouleur,300);
		</script>
	</body>
</html>

Articles connexes