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

Vue hybride

Discussions similaires

Partager

Partager