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

**dacid** · 03/06/2010, 16h36

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�.

J'ai essay� des clearTimeOut() � gogo, mais rien n'y fait.

J'ai isol� le cas de figure dans un exemple simple et autonome:

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
<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.

**SpaceFrog** · 03/06/2010, 16h54

afin de pouvoir faire un clearTimeout, il faudrait que le setTimeout soit attribu� � une variable

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 ????

**dacid** · 03/06/2010, 17h05

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 :

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

**SpaceFrog** · 03/06/2010, 17h14

essaye avec

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**dacid** · 03/06/2010, 17h19

J'ai trouv�:

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Pffff, je suis dessus depuis ce matin quand m�me !

Une preuve de plus que FireFox appr�hende mieux le JavaScript que IE...

Merci pour le coup de main SpaceFrog.

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

JavaScript

Discussions similaires

Partager

Partager