setTimeout en parallèle [Résolu]

[xephres]

Bonjour,

Pour une petite animation (imaginez des lumières qui s'allument aléatoirement), j'utilise plusieurs settimeout contenant des setinterval. Les setinterval appellent la fonction qui gère la variation de alpha. En faisant plusieurs appels successifs, ça fonctionne, voir le code ci-dessous.

Code :

1
2
3
setTimeout('setInterval("loadText(1)",50)',500);
setTimeout('setInterval("loadText(2)",50)',1000);
setTimeout('setInterval("loadText(3)",50)',1500);

Seulement, si cette méthode fonctionne lorsqu'il n'y a pas beaucoup de lumières à gérer, au bout d'un moment, un boucle serait bien utile. Seulement, toutes mes tentatives restent infructueuses.

J'ai bien pensé à utiliser quelque chose du genre

Code :

1
2
3
4
5
6
7
8
9
for(...m...)
{
setTimeout(function(){myinterval(m);}, 500*m);
}
 
function myinterval(myvar)
{
setInterval(function(){loadText(myvar);},50)
}

mais dans ce cas, la variable m du for (mettons m<=5) va rester constante (m=6).

Chose significative, si je fais un alert, pour chaque fonction de la variable m transmise, j'ai la bonne valeur qui s'affiche. Voir le code suivant :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
for(...m...)
{
alert(m);
setTimeout(function(){myinterval(m);},500*m);
}
 
function myinterval(myvar)
{
alert(myvar)
setInterval(function(){loadText(myvar);}, 50);
}
 
//+ un alert dans loadText

Je n'arrive pas à surmonter ce problème. J'ai bien vu des cas où il semblait conseillé d'utiliser clearInterval mais je ne vois pas comment l'utiliser dans mon cas qui me fait penser à une tentative de multithread... Seulement, s'il s'agit bien de multithread, alors mon expérience est trop tenue pour m'en sortir sans aide...

Merci.

[ABCIWEB]

Donnes nous un exemple de code complet et le plus simple possible qui résume ton problème.

[xephres]

Je vais essayer d'expliquer autrement.


Le code suivant fonctionne parfaitement :

Code :

1
2
3
4
5
6
7
8
function mytimer()
{
setTimeout('setInterval("loadText(1)",52)',500);
setTimeout('setInterval("loadText(2)",55)',1500);
setTimeout('setInterval("loadText(3)",58)',2600);
...
setTimeout('setInterval("loadText(9)",56)',9200);
}

J'ai plusieurs settimeout successifs. Ce que je souhaite, c'est faire une boucle qui va faire la répétition à ma place, de manière à ce que je n'aie plus qu'à faire varier m.

Dès que j'essaye de créer une boucle for, plus rien ne fonctionne convenablement. Le code suivant ne fonctionne pas, car la viable m n'est pas transmise.

Code :

1
2
3
4
5
6
7
function mytimer()
{
for( m=1 ; m<=9 ; m++)
{
setTimeout('setInterval("loadText(m)",50)',500*m);
}
}

J'ai donc essayé

Code :

1
2
3
4
5
6
7
8
9
10
11
12
function mytimer()
{
for( m=1 ; m<=9 ; m++)
{
setTimeout(function(){myinterval(m);}, 500*m);
}
}
 
function myinterval(myvar)
{
setInterval(function(){loadText(myvar);}, 50);
}

Mais ça ne fonctionne pas. Tel que le problème se manifeste, c'est comme s'il voulait bien gérer plusieurs settimeout successifs écrits "en dur" mais pas dans une boucle for.

Mettons que je mette

Code :

1
2
3
4
function loadText(coef)
{
document.get....innerHTML = coef ;
}

Il va m'afficher 10. Si je rajoute des "alert" pour afficher le paramètre transmis, il ne va pas y avoir de problème, les valeurs semblent bonnes.

En gros, c'est comme si loadText était appelé une seule fois à la sortie de mytimer au lieu d'être appelé pour chaque valeur de m transmise...

[javatwister]

salut

ton setInterval dans un setTimeout est en soi assez peu compréhensible!

après, si tu veux une gestion indépendante de chaque timer, crée un nouvel objet "lumière" ou "je ne sais quoi" pour chaque partie de l'animation;

mais pour aller plus loin, il nous manque une partie html (au moins);

[andry.aime]

Bonjour,

Une fonction récursive ne te convient pas?

A+.

[xephres]

Bonjour,

@javatwister

Pour ce qui est du code html, la partie concernée est plus que basique, c'est tout simplement des div successifs, le seule aspect css à gérer dynamiquement, c'est une variation du alpha. En gros les cases s'allument et s'éteignent indépendamment les unes des autres, en continu.

Code :

1
2
3
4
<div id="case1></div>
<div id="case2></div>
...
<div id="case9></div>

Le problème vient vraiment des settimeout dans une boucle.

Je comprends bien que des setinterval dans des settimeout, c'est... spécial, mais pour répondre à @andry.aime, je ne vois pas trop comment procéder via une fonction récursive. Le truc c'est que ce sont des thread parallèles, ils ne doivent pas dépendre les uns des autres.

En gros, les settimeout, c'est pour décaler l'allumage de chaque case et le setinterval sert à faire clignoter chaque case à un rythme précis (En monochrome, sans habillage particulier, ça peut fait penser à une barre de chargement).

[andry.aime]

Code :

1
2
3
4
5
6
7
8
9
10
function mytimer(){
	for( m=1 ; m<=9 ; m++)
	{
		setInterval(function(){loadText(m)},500*m);
	}
}
function loadText(m){
	////
	setTimeout(function() {loadText(m)},50+(2*m))
}

[javatwister]

en fait, vu que for ne temporise pas, m est forcément à son maximum en un clin d'oeil...

[andry.aime]

Envoyé par javatwister

en fait, vu que for ne temporise pas, m est forcément à son maximum en un clin d'oeil...

Oui mais avec 500*m c'est assez non?

[xephres]

@andry.aime
@javatwister

Cool, ça marche, ça y est. Merci pour la fonction récursive. J'ai dû modifier un peu le code proposé mais, maintenant, ça roule ^ ^. Avec la suggestion "créer un objet spécifique" (argh à force passer de l'anglais au français, j'allais écrire object.... ), ça m'a donné une idée. Et voilà le résultat :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 
	function mytimer()
	{
		setInterval(function(){generator();},1200) ;
	}
 
	function generator()
	{
		if(through <= 12)
		{
			mycoef = through;
			myinterval(mycoef) ;
			through++ ;
		}
	}
 
	function myinterval(myvar)
	{
		loadText(myvar) ;
		setTimeout(function(){myinterval(myvar);}, 56);
	}

Il faut un peu jouer avec les coefficients selon le résultat attendu mais pour moi, ça roule

[javatwister]

cool

sinon, je venais de faire un exemple, au brouillon; pas le temps d'affiner, vais au boulot

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
<title>...</title>
 
<style type="text/css">
 
#cadre div {
	width:25px;
	float:left;
	margin-right:10px;
	height:25px;
	background-color:lime;
}
 
</style>
 
 
 
 
 
</head>
<body>
 
<div id="cadre">
 
	<div></div><div></div><div></div><div></div>
 
</div>
 
 
 
<script type="text/javascript">
 
var dep=[100, 1500, 4000, 600];
var int=[50,800,1000,600];
var col=["red","black","pink","blue"];
var tab=[];
 
var c=document.getElementById("cadre").getElementsByTagName("div");
 
for(i=0;i<c.length;i++){
	tab[i]=new lum(i);
 
	go(i)
}
 
 
function go(rang){
	setTimeout(function(){cligne(rang)},dep[rang])
}
 
function cligne(colo){
 
	tab[colo].run();
 
}
 
 
function lum(num){
	this.num=num;
	this.coul=col[num];
	this.del=int[num];
	this.timer;
}
 
 
lum.prototype.run=function(){
	var bis=this;
	this.timer=setInterval(function(){
				c[bis.num].style.backgroundColor= c[bis.num].style.backgroundColor!=bis.coul ? bis.coul : "lime"
				}
				,bis.del)
}
 
</script>
 
 
</body>
</html>