setTimeout en parallèle

**xephres** · 25/05/2011, 18h03

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 25/05/2011, 20h21

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

**xephres** · 25/05/2011, 22h48

Je vais essayer d'expliquer autrement.

Le code suivant fonctionne parfaitement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 26/05/2011, 08h30

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** · 26/05/2011, 08h32

Bonjour,

Une fonction récursive ne te convient pas?

A+.

**xephres** · 26/05/2011, 09h45

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 26/05/2011, 09h54

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 26/05/2011, 12h12

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

**andry.aime** · 26/05/2011, 12h17

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** · 26/05/2011, 12h33

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

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 26/05/2011, 13h12

cool

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

setTimeout en parallèle

JavaScript

Discussions similaires

Partager

Partager