Les méthodes setTimeout() et setInterval()

JavaScript publié le 3 Juin 2017 mis à jour le 13 Déc 2022 Guillaume

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

setTimeout("MaFonction()", 3000);

Exécutera MaFonction() dans trois secondes.

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. Vous pouvez également écrire les fonctions appelées sans guillemets et sans parenthèses :

setInterval(MaFonction, 3000);
setTimeout(MaFonction, 3000);

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>
        const tabImages = ["snoopy.gif", "scoubidou.gif", "droopy.gif"];
        let numImage = 0;

        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>

Dans le code ci-dessus, écrire :

const tabImages = ["snoopy.gif", "scoubidou.gif", "droopy.gif"];

signifie :

tabImages[0] = "snoopy.gif";
tabImages[1] = "scoubidou.gif";
tabImages[2] = "droopy.gif";

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>
		let 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++;
		}
		const tabimages = ["hopper1.jpg", "hopper2.jpg", "hopper3.jpg"];
		let 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>