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);

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>
        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

Langage JavaScript Le langage JavaScript permet d'exécuter des programmes simples comme la vérification d'un formulaire, ou très élaborés comme un jeu ou une application. Ce langage est gé...
La méthode getElementById La méthode JavaScript getElementById() permet de récupérer les informations d'une balise identifiée par son id. Syntaxe informations à récupérer = document.getElementBy...
Lightbox simple avec jQuery Voici un code tout simple pour réaliser un effet Lightbox dans vos galeries d'images. Créez un dossier nommé Lightbox puis un sous-dossier img qui va contenir les images. Les v...
JavaScript dans les liens Code JavaScript dans l'attribut href Une URL peut désigner du code JavaScript. Le principe est simple, mettez le préfixe javascript: suivi de votre code JavaScript. Exemple ave...
Gestion des fenêtres Il est possible de créer de nouvelles fenêtres, de contrôler leur aspect et de les refermer de manière dynamique. Le code ci-dessous, scindé en 3 pages, illustre ces possibilités....