Boucle for et setTimeOut()

Bonjour,

J'ai un petit soucis un algorithme javascript et je pense que vous pourrez m'aider :

Je veux parcourir un tableau ou sont répertorié tous les éléments avec la classe "test" (Grâce à .length), il y en a 6 en tout dans mon html. Je voudrai par exemple que les backgrounds de chaque élément deviennent rouges mais pas tous en même temps, je veux laisser quelques centaines de millisecondes entre chaque animation.

Voila mon code qui ne fonctionne pas :

var post = document.getElementsByClassName("test");
var tailleTableau = post.length;
console.log(tailleTableau);

for (i = 0; i < tailleTableau; i++) {
	setTimeOut(function() {
               post.style.background = "red";
        }, 500);
}

Merci d'avance

Apple

salut,
déjà il y a deux erreurs dans ton code. La méthode getElementsByClassName retourne un tableau et tu dois donc indiquer l'indexe de l'élément que tu souhaites cibler :

post.style.background = "red";

devient

post[i].style.background = "red";

Ton autre erreur est l'écriture de setTimeout (il n'y a pas de lettre capitale pout le "o" de "out").

Maintenant pour que ton code marche, tu dois d'abord utiliser une fonction anonyme à exécuter immédiatement (ou closure) afin de conserver la valeur de la variable i. Si non, cette variable qui s'incrémente à chaque itération aura la valeur de tailleTableau qui ne correspond à aucun indexe.

Une fois que tu as isolé ta variable du contexte globale, tu dois juste multiplier le temps de décalage de la fonction setTimeout par la valeur actuelle de i.

Voici un petit exemple pour te donner une idée.[/i]

Zelalsan a écrit :
Voici un petit exemple pour te donner une idée.

Bien vu Zelalsan.

Attention à ne pas oublier la déclaration de la variable dans la boucle for (bonne pratique) :

'use strict';
...
for (var i = 0; i < post.length; i++) ...

Ou encore (en ECMAScript 2015) :

'use strict';
const post = document.getElementsByClassName('test');
for (let i = 0; i < post.length; i++) (function(i) {
	setTimeout(function() {
  	post[i].style.background = 'Red';
	}, 500 * (i+1));
}(i));

Modifié par Olivier C (25 Jan 2017 - 14:12)