Discussion :

[cinmot]

Bonjour à tous.

Je rencontre un petit problème, avec un appel sur un timer en javascript.

J'ai une méthode qui doit parser un fichier xml et l'afficher sous forme de texte defilant.

Dans un premier temps il recupère et parse les données, pas de problème.Ensuite une boucle sur ce tableau de valeurs doit les afficher 2 par 2, et doit appeler une methode defilement pour faire l'effet sur la page.

La methode defilement agit sur le css à intervalle régulier jusqu'à ce que le premier élément soit recouvert.

Le souci vient du fait qu'il parcourt toute la boucle de valeurs et attend d'avoir affiché les deux dernières avant de faire l'effet de defilement.En fait, javascript parcourt le reste du code avant de faire le defilement.

(Pourtant, tout se déroule normalement sur firebug quand je debugge ou si
je mets des alerts).J'ai même essayé avec un booleen pour interrompre le code, le temps que le defilement soit fini, mais rien n'y fait.

Quelqu'un pourrait il m'expliquer ce comportement, bizarre et comment je peux contourner le problème.

Merci d'avance aux âmes charitables.

[Bovino]

Le souci vient du fait qu'il parcourt toute la boucle de valeurs et attend d'avoir affiché les deux dernières avant de faire l'effet de defilement.En fait, javascript parcourt le reste du code avant de faire le defilement.

En fait, JavaScript continue à exécuter le code une fois le setInterval enclenché, donc l'effet s'applique effectivement après.
Cependant, sans code, il est difficile de t'aider !

[cinmot]

Bonsoir,

Désolé de n'avoir pas pu poster plus tôt, j'étais au boulot.Donc le code,et en premier lieu le constructeur carroussel et sa méthode creer_cadre.

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
45
46
47
 
/******* classe carroussel********/
 
function carroussel(mode,sens_defilement){
this.mode=mode;
this.sens=sens_defilement;
 
}
 
carroussel.prototype={
 
creer_cadre: function(){
	     var Dom=new DOM("body","");//prototypage d'un nouvel objet Dom qui va appeler ses methodes pour créer les noeuds divs
 
	     Dom.Add_Node(Dom.element_depart,0,"div","id","bordure","","");
	     var contenu=new AJAX();
	     contenu.init_xml();//appelle une fonction qui contient un ajax Request(lib prototype) et qui renvoie le contenu du fichier xml
 
 
	       if (this.mode=="Affichage"){//Un seul si il n'y a pas de defilement
	         Dom.Add_Node("div",0,"div","id","conteneur",nb_item,"");
	       }
	       else{// et deux si defilement
	        Dom.Add_Node("div",0,"div","id","conteneur0","","");
                Dom.Add_Node("div",0,"div","id","conteneur1","",""); 
 
 
	      var i=0;
	         while(i<nb_item){//nb_item est le nombre d'items du xml ici 3
 
	            fin_boucle=false;
	              affiche_valeurs(i);// reinitialise les valeurs des attributs css des deux divs et crée les noeuds textes à l'intérieur
	           var defile="defilement_horizontal();"//suite à de nombreux essais, le dernier en date, essayer de mettre la fonction en variable
	           //et appel récurent à defilement horizontal
	            envoi=setInterval(defile,10);
	            i+=1;
 
}
 
 
 
 
	        }
             }//fin methode creer_cadre
 
 
}//fin prototype carroussel

et enfin la fonction qui effectue le défilement des deux divs.

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
 
//**************Fonction defilement-horizontal***************************
 
function defilement_horizontal(){
 
 		if (largeur_clip < largeur_carroussel) { 
 
			largeur_clip=largeur_clip+3;
			div0.setStyle({left:(10-largeur_clip)+'px'});
			div0.setStyle({clip:'rect(0px '+(largeur0)+'px 300px '+(largeur_clip)+'px)'});
			div1.setStyle({left:410-largeur_clip+'px'});
			div1.setStyle({clip:'rect(0px '+(largeur_clip) +'px 300px 0px)'});
 
	        }else{fin_boucle=true;
			 clearInterval(envoi);
	        }
 
}//fin de la fonction defilement

J'ai fait des essais toute la journée d'hier entre setTimeout et setInterval, sous forme de méthode, de fonction. Et même en insèrant un booléen, mais ça ne fonctionne pas.

J'ai aussi déplacé l'appel au défilement dans des fonctions imbriquées comme affiche_valeurs(), mais rien n'y fait, il n'effectue le défilement que lorsque la boucle tant_que ou pour est finie.

J'espère qu'il y a assez de code pour voir le problème, pour éviter de surcharger le message, je n'y ai pas inclus les appels ajax et autres insertions.

Bonne soirée à vous, je continue de cogiter, en espérant que la nuit porte conseil.

[cinmot]

Bonjour,

J'ai trouvé une solution au problème, il s'agit de ne pas passer par des boucles.

J'ai utilisé deux boucles setTime en remplacement dans lequel j'augmente le paramètre, une boucle à l'intérieur vérifie si l'on continue la boucle ou si on l'arrête.

Ce n'est pas très standart mais efficace.

Voilà, le post peut être considéré comme résolu. à bientôt.