Comportement étrange de setTimeout(), il "mémorise" les évènements

Version imprimable

Bonjour à tous,

J'ai une appli Web qui permet de faire défiler des contenus ("Steps") de la manière d'un diaporama.
Il y a 2 modes de défilement des steps: Auto (un temps est défini pour chaque step) et manuel (clic sur un bouton).

Voici le problème (l'incohérence n'apparait que sous IE):
L'appli démarre en mode auto, les temps d'affichage des steps sont bien respectés.
Passons au mode manuel et naviguons... Lorsqu'on revient au mode procédure, les steps s'enchaînent à la même vitesse que celle à laquelle on les a fait défiler dans le mode manuel. Le setTimeout() est complètement perturbé. 8O 8O 8O
J'ai essayé des clearTimeOut() à gogo, mais rien n'y fait. :cry:

J'ai isolé le cas de figure dans un exemple simple et autonome:
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 <html><head><title>TEST</title> <script type="text/javascript"> var tab = new Array(5, 1, 3, 5, 1, 5, 5, 5, 5, 5, 5, 5, 5); // Tableau du temps d'affichage de chaque Step var idx = 0; // Index de l'étape en cours var modeDefilAuto = true; // Mode de défilemnet actuel (auto/manuel) function afficheStep() { // Affiche le step de l'idx en cours document.getElementById("divMain").innerHTML = "Etape: "+idx+" ("+tab[idx]+" sec)<br />Défilement Auto: "+modeDefilAuto +".<script language='javascript'>setTimeout('faireNext();', "+(tab[idx] * 1000)+");<\/script>"; for (var i=0; i<document.getElementById("divMain").getElementsByTagName("script").length; i++) { // Boucle pour que le javascript injecté soit interpreté eval(document.getElementById("divMain").getElementsByTagName("script")[i].innerHTML); } } function changeMode() { // Passe du mode auto au mode manuel et inversement modeDefilAuto = ! modeDefilAuto; idx = 0; afficheStep(); } function nextStep() { // Passe au step suivant if (idx<12) { idx++; afficheStep(); } } function faireNext() { if (modeDefilAuto) { nextStep(); } } </script> </head><body onLoad="afficheStep();"> <center> <br /> <div id="divMain" style="background-color:#CCCCCC;">Principal</div><br /> <input type="button" value="Step suivant" onClick="nextStep();" /> <input type="button" value="Changer de mode" onClick="changeMode();" /> </center> </body></html>
Pouvez vous me donner une explication ?

Merci d'avance.

03/06/2010, 16h54
SpaceFrog
afin de pouvoir faire un clearTimeout, il faudrait que le setTimeout soit attribué à une variable
Code:

1 2 3 var running=setTimeout( ...) clearTimeout(running)
parcontre ta façon de lancer le setTimeout est plus que curieuse
pourquoi le faire en injectant une balise script ????

Bonjour SpaceFrog,

Merci pour votre rapidité.

C'est un peu compliqué... En fait, mon appli est en jQuery+PHP.
En ajax, je met le code javascript dans le DIV depuis un script PHP pour ne pas avoir à rafraichir la page.
J'ai voulu reproduire le cas en Javascript pur le plus fidèlement possible pour bien identifier le problème, voir si ça ne venait pas d'autre chose.

Sinon, le clearTimeout ne donne rien non plus:

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
<html><head><title>TEST</title>
<script type="text/javascript">
	var tab = new Array(5, 1, 3, 5, 1, 5, 5, 5, 5, 5, 5, 5, 5); // Tableau du temps d'affichage de chaque Step
	var idx = 0; // Index du step en cours
	var modeDefilAuto = true; // Mode de défilement actuel (auto/manuel)
	var tmr = null;
 
	function afficheStep() { // Affiche le step de l'idx en cours
		document.getElementById("divMain").innerHTML = "Etape: "+idx+" ("+tab[idx]+" sec)<br />Défilement Auto: "+modeDefilAuto
			+".<script language='javascript'>tmr=setTimeout('faireNext();', "+(tab[idx] * 1000)+");<\/script>";
		for (var i=0; i<document.getElementById("divMain").getElementsByTagName("script").length; i++) { // Boucle pour que le javascript injecté soit interpreté
			eval(document.getElementById("divMain").getElementsByTagName("script")[i].innerHTML);
        }
	}
 
	function changeMode() { // Passe du mode auto au mode manuel et inversement
		//tmr = null;
		clearTimeout(tmr);
		modeDefilAuto = ! modeDefilAuto;
		idx = 0;
		afficheStep();
	}
 
	function nextStep() { // Passe au step suivant
		if (idx<12) {
			idx++;
			afficheStep();
		}
	}
 
	function faireNext() {
		if (modeDefilAuto) {
			nextStep(); 
		}
	}
</script>
</head><body onLoad="afficheStep();">
<center>
<br />
<div id="divMain" style="background-color:#CCCCCC;">Principal</div><br />
<input type="button" value="Step suivant" onClick="nextStep();" />
<input type="button" value="Changer de mode" onClick="changeMode();" />
</center>
</body></html>

03/06/2010, 17h14
SpaceFrog

essaye avec

Code:

<script language='javascript'>window.tmr=setTimeout('faireNext();', "+(tab[idx] * 1000)+");<\/script>
03/06/2010, 17h19
dacid

J'ai trouvé:

Il faut faire un clearTimeout() avant chaque setTimeout(). :mrgreen:

Code:

<script language='javascript'>clearTimeout(tmr);tmr=setTimeout('faireNext();', "+(tab[idx] * 1000)+");<\/script>

Pffff, je suis dessus depuis ce matin quand même ! :aie:
Une preuve de plus que FireFox appréhende mieux le JavaScript que IE... :roll:

Merci pour le coup de main SpaceFrog.