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

Résolu
cs_nitrique Messages postés 344 Date d'inscription jeudi 1 mai 2003 Statut Membre Dernière intervention 4 avril 2011 - 3 juin 2010 à 16:48
cs_nitrique Messages postés 344 Date d'inscription jeudi 1 mai 2003 Statut Membre Dernière intervention 4 avril 2011 - 8 juin 2010 à 21:07
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:
<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)

function afficheStep() { // Affiche le step de l'idx en cours
document.getElementById("divMain").innerHTML = "Etape: "+idx+" ("+tab[idx]+" sec)
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>
<center>



Principal




</center>
</html>

Pouvez vous me donner une explication ?

Merci d'avance.

4 réponses

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
4 juin 2010 à 22:45
Bonjour,
il serait souhaitable que tu killes le timer, avec clearTimeout, avant de rappeler la fonction setTimeout.
PS : drôle de façon d'activer le javascript !!!

;O)
3
cs_nitrique Messages postés 344 Date d'inscription jeudi 1 mai 2003 Statut Membre Dernière intervention 4 avril 2011 1
8 juin 2010 à 10:47
Bonjour PetoleTeam,

Impec, c'était ça... Je le faisait, mais pas ou il fallait.

Oui, pour la façon d'activer le JS, j'ai chopé ça sur la toile... Ça fonctionne pas mal.

Merci.
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
8 juin 2010 à 18:43
Bonjour,
le principal est que cela marche même si ta façon de procéder me laisse un peu pantois...

;O)
0
cs_nitrique Messages postés 344 Date d'inscription jeudi 1 mai 2003 Statut Membre Dernière intervention 4 avril 2011 1
8 juin 2010 à 21:07
En effet... Mais c'est fait exprès.

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.

Voilà, pour ne pas vous laisser pantois.
0
Rejoignez-nous