[Résolu] Boucle for et setTimout()

Bonjour à tous,

Je bloque sur un problème jquery qui va (surement) vous sembler extrêmement simple.

Je voudrais lancer des fonctions à interval régulier pour modifier différents div de ma page.
Le but est d'afficher des blocs les uns après les autres, mais sans savoir le nombre de blocs que comptera ma page.

voici un code qui marche, mais qui me force à connaitre le nombre de div à afficher

				/setTimeout(function() {
				$("#blocknews0").css("opacity","1");
				$("#blocknews0").removeClass("initnews");
				},500);
				setTimeout(function() {
				$("#blocknews1").css("opacity","1");
				$("#blocknews1").removeClass("initnews");
				},1500);
				setTimeout(function() {
				$("#blocknews2").css("opacity","1");
				$("#blocknews2").removeClass("initnews");
				},2500);

Mais que je voudrais remplacer par

		for (i=0;i<j;i++) {
				milisec=i*500;
				setTimeout(function() {
				$("#blocknews"+i).css("opacity","1");
				$("#blocknews"+i).removeClass("initnews");
				},milisec);
		}

Ou j est mon nombre de div.
Mais ce code ne fonctionne pas, la varible i n'est pas incrémentée dans mon setTimeout.

Merci de votre aide
Modifié par Geoff0_1 (18 Mar 2015 - 15:42)

salut,
c'est parce que tu es entrain d'utiliser une variable "i" qui une fois la fonction contenue dans "setTimeout" appelée, aura la valeur de "j". C'est à dire que ta boucle s'effectue et que ta variable "i" s'incrémente. À la fin de ta boucle, ta variable "i" aura atteint donc son maximum (qui est dans ce cas "j"). Comme tu appelles une fonction après un certain intervalle, ta boucle aura eu le temps d'atteindre son maximum et la variable "i" utilisée à l'intérieur de la fonction du "setTimeout" sera toujours égale à "j".
Pour remédier à ça, tu dois passer par une fonction anonyme que tu appelles immédiatement et à laquelle tu passes la valeur de la variable "i" de telle sorte à ce que cette valeur soit conservée dans un environnement non globale. L'incrémentation de "i" n'aura alors plus d'incidence.

for (var i=0; i<j; i++) {

	(function (i){

		setTimeout(function() {

			$("#blocknews"+i).css("opacity","1");
			$("#blocknews"+i).removeClass("initnews");

		}, i*500);

	})(i)

}

PS : tu devrais penser à déclarer tes variable avec var et il faudrait éviter de créer des variables inutiles comme "milisec"

Zelalsan a écrit :

Pour remédier à ça, tu dois passer par une fonction anonyme que tu appelles immédiatement et à laquelle tu passes la valeur de la variable "i" de telle sorte à ce que cette valeur soit conservée dans un environnement non globale. L'incrémentation de "i" n'aura alors plus d'incidence.

Génial ! Merci !

J'avais bien compris que "i" continuait à être incrémenté par la boucle for avant l'appel de la fonction dans mon setTimeout, mais je n'avais aucune idée de la manière de lui faire passer la bonne valeur.

J'avais essayé

setTimeout(function(i) {

			$("#blocknews"+i).css("opacity","1");
			$("#blocknews"+i).removeClass("initnews");

		}, milisec);

L'idée y étais mais pas la manière

Merci de ton aide !
Modifié par Geoff0_1 (18 Mar 2015 - 17:01)