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.