animation

setTimeout

setTimeout( fonction, temps) permet de déclencher une fonction (premier paramètre) après un certain temps (second paramètre, exprimé en millisecondes).

Premier exemple

La fonction rougeoie() met le texte du paragraphe d'identifiant "je_rougis" en rouge après un certain temps.

Relancer le chargement de la page pour constater le délai.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> attente </title>
        
    </head>
    <body>
		
	

	<p id="je_rougis"> Je suis noir.</p>

	  <script>
	  function rougeoie(){
		  let r = document.getElementById("je_rougis");
		  r.textContent = "Ah, non ! Je suis rouge.";
		  r.style.color = 'red';
	  }
	  setTimeout(rougeoie, 2000); // on déclenche la fonction après 2 s.
	  </script>


    </body>
</html>

Exemple avec paramètre

Si l'on veut passer des paramètres à la fonction à exécuter, on peut les indiquer après le paramètre temps.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> attente </title>
        
    </head>
    <body>
		
	

	<p id="cameleon"> Je suis noir.</p>

	  <script>
	  function colore(couleur){
		  let r = document.getElementById("cameleon");
		  r.textContent = "Ah, non! Je suis de couleur " + couleur + ".";
		  r.style.color = couleur;
	  }
	  setTimeout(colore, 2000, 'orange'); // on déclenche la fonction après 2 s.
	  </script>


    </body>
</html>

Exemple avec animation

Pour un effet d'animation, la fonction setTimeout est réutilisée à l'intérieur même de la fonction appelée. Notre fonction modifiant la couleur sera ainsi appelée à nouveau toutes les 2 secondes.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> attente </title>
        
    </head>
    <body>
		
	

	<p id="cameleon"> Je suis de couleur noire.</p>

	  <script>
		  
	// on récupère l'élément p d'identifiant cameleon :
	let r = document.getElementById("cameleon");
	// on définit un tableau de couleurs :
	let couleurs = ['green', 'orange', 'red', 'magenta', 'brown', 'goldenrod', 'lightcoral', 'midnightblue'];
	
	let couleur; // pour stocker une couleur 
	
	 function colore(){
		// on choisit une couleur au hasard dans le tableau :
		couleur = couleurs[Math.floor(Math.random() * couleurs.length)];
		// on modifie le texte de l'élément p :
		r.textContent = "Je suis de couleur " + couleur + ".";
		// on modifie sa couleur :
		r.style.color = couleur;
		// on relance la fonction 2 s plus tard : 
		setTimeout(colore, 2000); 
	  }
	   
	  // premier déclenchement de la fonction, 2 s après chargement de la page :
	  setTimeout(colore, 2000);  
	  </script>


    </body>
</html>

Stopper l'animation

On reprend l'animation précédente, mais on la stoppe après 10 secondes. On utilise pour cela un objet Date (vous trouverez facilement des détails sur le web pour utiliser Date dans d'autres contextes).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> attente </title>
        
    </head>
    <body>
		
	

	<p id="cameleon"> Je suis de couleur noire.</p>

	  <script>
		  
		//temps initial au chargement de la page :
		var tempsdepart = new Date().getTime();
		// on récupère l'élément p d'identifiant cameleon :
		var r = document.getElementById("cameleon");
		// on définit un tableau de couleurs :
		var couleurs = ['green', 'orange', 'red', 'magenta', 'brown', 'goldenrod', 'lightcoral', 'midnightblue'];
		// pour stocker une couleur :
		var couleur;
		
	function colore(){
		// on choisit une couleur au hasard dans le tableau :
		couleur = couleurs[Math.floor(Math.random() * couleurs.length)];
		// on modifie le texte de l'élément p :
		r.textContent = "Je suis de couleur " + couleur + ".";
		// on modifie sa couleur :
		r.style.color = couleur;
		// on récupère le temps "actuel" :
		var temps = new Date().getTime(); 
		// on relance la fonction colore si le temps écoulé est en-dessous de 10 secondes :
		if ( temps - tempsdepart < 10000 )  setTimeout(colore, 2000); 
	  }
	
	// premier déclenchement de la fonction, 2 s après chargement de la page :
	setTimeout(colore, 2000);  
	</script>


    </body>
</html>

Sur le sujet, consultez également le rôle de la fonction clearTimeout, par exemple sur cette page.

On reprend ci-dessous l'animation précédente, mais on la stoppe après 4 changements de couleur par une autre méthode (sans décompte de temps).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> anime </title>
        
    </head>
    <body>
		
	

	<p id="cameleon"> Je suis de couleur noire.</p>

	  <script>
		  
		 
		// on récupère l'élément p d'identifiant cameleon :
		var r = document.getElementById("cameleon");
		// on définit un tableau de couleurs :
		var couleurs = ['green', 'orange', 'red', 'magenta', 'brown', 'goldenrod', 'lightcoral', 'midnightblue'];
		// pour stocker une couleur :
		var couleur;
		
	function colore(nbChgt){
		// on choisit une couleur au hasard dans le tableau :
		couleur = couleurs[Math.floor(Math.random() * couleurs.length)];
		// on modifie le texte de l'élément p :
		r.textContent = "Je suis de couleur " + couleur + ".";
		// on modifie sa couleur :
		r.style.color = couleur;
	   
		// on relance la fonction colore tant que le nombre de changements 
		// est en-dessous d'une certaine valeur : 
		if ( nbChgt < 4 )  setTimeout(colore, 2000, nbChgt+1 ); 
	  }
	
	// premier déclenchement de la fonction, 2 s après chargement de la page 
	// avec une valeur 0 pour le paramètre comptant le nombre de changements :
	setTimeout(colore, 2000, 0);  
	</script>


    </body>
</html>

setInterval

La fonction setInterval(fonction, temps) permet de relancer la fonction à intervalle de temps (en ms) régulier.

Premier exemple

On reprend l'exemple précédent (modification de la couleur du texte toutes les 2 secondes).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> anime </title>
        
    </head>
    <body>


	<p id="cameleon"> Je suis de couleur noire.</p>

	  <script>
		// on récupère l'élément p d'identifiant cameleon :
		var r = document.getElementById("cameleon");
		// on définit un tableau de couleurs :
		var couleurs = ['green', 'orange', 'red', 'magenta', 'brown', 'goldenrod', 'lightcoral', 'midnightblue'];
		// pour stocker une couleur :
		var couleur;
		
	function colore(){
		// on choisit une couleur au hasard dans le tableau :
		couleur = couleurs[Math.floor(Math.random() * couleurs.length)];
		// on modifie le texte de l'élément p :
		r.textContent = "Je suis de couleur " + couleur + ".";
		// on modifie sa couleur :
		r.style.color = couleur;
	  }
	
	// déclenchement de la fonction, 2 s après chargement de la page puis à nouveau toutes les 2 secondes :
	setInterval(colore, 2000);  
	</script>

    </body>
</html>

Stopper l'animation

Pour stopper une répétition obtenue avec setInterval, il faut avoir stocké en mémoire l'objet puis utiliser clearInterval.

Par exemple, en stoppant après un certain temps :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> anime </title>
        
    </head>
    <body>


	<p id="cameleon"> Je suis de couleur noire.</p>

	  <script>
		//temps initial au chargement de la page :
		var tempsdepart = new Date().getTime();
		
		// on récupère l'élément p d'identifiant cameleon :
		var r = document.getElementById("cameleon");
		// on définit un tableau de couleurs :
		var couleurs = ['green', 'orange', 'red', 'magenta', 'brown', 'goldenrod', 'lightcoral', 'midnightblue'];
		// pour stocker une couleur :
		var couleur;
		
	function colore(){
		// on choisit une couleur au hasard dans le tableau :
		couleur = couleurs[Math.floor(Math.random() * couleurs.length)];
		// on modifie le texte de l'élément p :
		r.textContent = "Je suis de couleur " + couleur + ".";
		// on modifie sa couleur :
		r.style.color = couleur;
		//temps actuel :
		var temps  = new Date().getTime();
		// on stoppe les appels après une certaine durée :
		if( temps - tempsdepart > 10000 ) clearInterval(changement);
	  }
	
	// déclenchement de la fonction, 2 s après chargement de la page puis à nouveau toutes les 2 secondes :
	var changement = setInterval(colore, 2000);  
	</script>

    </body>
</html>

Ou en utilisant un compteur de changements :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> anime </title>
        
    </head>
    <body>


	<p id="cameleon"> Je suis de couleur noire.</p>

	  <script>
		// variable pour enregistrer le nb de modifs de couleur :
		var nbchgt = 0;
		// on récupère l'élément p d'identifiant cameleon :
		var r = document.getElementById("cameleon");
		// on définit un tableau de couleurs :
		var couleurs = ['green', 'orange', 'red', 'magenta', 'brown', 'goldenrod', 'lightcoral', 'midnightblue'];
		// pour stocker une couleur :
		var couleur;
		
	function colore( ){
		// on choisit une couleur au hasard dans le tableau :
		couleur = couleurs[Math.floor(Math.random() * couleurs.length)];
		// on modifie le texte de l'élément p :
		r.textContent = "Je suis de couleur " + couleur + ".";
		// on modifie sa couleur :
		r.style.color = couleur;
		//on incrémente la variable enregistrant le nombre de changements de couleur :
		nbchgt++; 
		// on stoppe les appels après un  certain nombre de changements  de couleurs :
		if( nbchgt > 5 ) clearInterval(changement);
	  }
	
	// déclenchement de la fonction, 2 s après chargement de la page puis à nouveau toutes les 2 secondes :
	var changement = setInterval(colore, 2000);  
	</script>

    </body>
</html>

Avec paramètres

Si l'on veut passer des paramètres à la fonction à exécuter, on peut les indiquer après le paramètre temps, comme pour la fonction setTimeout :
setInterval(fonction, temps, paramètre1, paramètre2,...).