ça ne marche qu'avec la fonction alert()

Version imprimable

Bonjour,

j'ai un petit probleme avec ma boucle javascript,
seulement le dernier résultat s'affiche, sauf si j'utilise "alert();" a chaque iteration.

Code:

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
 
var i=0;
		var total ="";
		var res = "";
		res = data.split('/');
		var length = res.length;
		for(i=0;i<length-1;i++){
 
			if (i%6==0){
 
				alert(i);                          //ici
				var vilA = ""+res[i]+"";
				var vilB = ""+res[i+1]+"";
				var latA = res[i+2];
				var longA = res[i+3];
				var latB = res[i+4];
				var longB = res[i+5];
 
				var map;
				var directionsPanel;
				var directions;
				map = new GMap2(document.getElementById("map_canvas"));
				map.addControl(new GLargeMapControl3D());
				map.addControl(new GMapTypeControl());
				map.setCenter(new GLatLng(47.082999, 2.395692), 6);
				directionsPanel = document.getElementById("map_directions");
				directions = new GDirections(map, directionsPanel);
				directions.load("from: "+latA+", "+longA+" to: "+latB+", "+longB);
				GEvent.addListener(directions,"load", function() {
					var distance = directions.getDistance().meters;
					distance=Math.floor(distance/1000);
					var duree = directions.getDuration().seconds;
					var heures=Math.floor(duree/3600);
					var minutes=(duree/60)-(heures*60);
					minutes=Math.floor(minutes);
					total = total+""+vilA+" -> "+vilB+" distance : "+distance+"km"+" duree : "+heures+"h"+minutes+"min"+"<br />";
					document.getElementById(""+divEcriture+"").innerHTML= total;
				});
			}
 
		}

Je suppose que la fonction alert() laisse le temps aux calculs de s'effectuer et que donc il faut que j'utilise quelque chose comme setTimeout mais dans mon cas je n'arrive pas à l'appliquer.

Est ce que quelqu'un peut m'aider ? merci ;)

Bonjour,
si je ne m'abuse, durant toute ta boucle tu écris le résultat au même endroit

Code:

document.getElementById("" + divEcriture + "").innerHTML = total;

mais que vaut divEcriture ?

essaies de mettre un appel à une fonction de mise à jour des infos, par exemple
Code:

1 2 3 4 function addInfo( info){ var oDiv = document.getElementById("div_info"); oDiv.innerHTML += info; }
que tu appelles dans ta fonction
Code:

1 2 3 4 5 6 7 8 9 GEvent.addListener(directions, "load", function () { var distance = directions.getDistance().meters; distance = Math.floor(distance / 1000); var duree = directions.getDuration().seconds; var heures = Math.floor(duree / 3600); var minutes = (duree / 60) - (heures * 60); minutes = Math.floor(minutes); addInfo( vilA + " -> " + vilB + " distance : " + distance + "km" + " duree : " + heures + "h" + minutes + "min" + "<br />"); });

05/03/2011, 16h47
alex7532

Bonjour,

merci pour votre reponse.

Je viens de tester cette solution mais ça ne marche pas, je n'ai toujours que le dernier element de ma boucle qui s'affiche dans mon div.

edit : a chaque tour de boucle le contenu du div n'est pas écrasé, c'est comme si la fonction n'avait pas le temps de s'exécuter à part au dernier tour de boucle.
05/03/2011, 17h29
NoSmoking

je n'avions pas vu que tu utilisais vilA et vilB qui au moment de la "réalisation" de la fonction mise en callback dans GEvent.addListener vaudront effectivement les valeurs affectées en fin de boucle.
Il te faut les passer en argument à la fonction pour avoir les bonnes valeurs.

Code:

GEvent.addListener(directions, "load", function ( vilA, vilB) {

Code:

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
function addInfo(info){
  var oDiv = document.getElementById("trajets");
  oDiv.innerHTML += info;
}
 
 
function ajoutSuccessif(inVilleDep,inVilleArr,inVillesArret,divEcriture) {
 
	idVilleDep = document.getElementById(""+inVilleDep+"").value;
	idVilleArr = document.getElementById(""+inVilleArr+"").value;
	idVillesArret = document.getElementById(""+inVillesArret+"").value;
 
	$.post("repAjout.php", {idVDep: ""+idVilleDep+"", idVArr: ""+idVilleArr+"", idVarrets: ""+idVillesArret+"", div: ""+divEcriture+""}, function(data){
 
		var i=0;
		var total ="";
		var traj ="";
		var sommeduree=0;
		var sommedistance=0;
		var res = "";
		res = data.split('/');
		var length = res.length;
 
 
		for(i=0;i<length-1;i++){   //pour chaque element de mon tableau 'res'
 
			if (i%6==0){   //si 'i' vaut 0,6,12... alors.. 
 
                                //alert(i);     <--     avec ça, ça marche bien..
				var vilA = ""+res[i]+"";
				var vilB = ""+res[i+1]+"";
				var latA = res[i+2];
				var longA = res[i+3];
				var latB = res[i+4];
				var longB = res[i+5];
 
				var map;
				var directionsPanel;
				var directions;
				map = new GMap2(document.getElementById("map_canvas"));
				map.addControl(new GLargeMapControl3D());
				map.addControl(new GMapTypeControl());
				map.setCenter(new GLatLng(47.082999, 2.395692), 6);
				directionsPanel = document.getElementById("map_directions");
				directions = new GDirections(map, directionsPanel);
				directions.load("from: "+latA+", "+longA+" to: "+latB+", "+longB);
				GEvent.addListener(directions,"load", function(vilA,vilB) {
					var distance = directions.getDistance().meters;
					distance=Math.floor(distance/1000);
					var duree = directions.getDuration().seconds;
					var heures=Math.floor(duree/3600);
					var minutes=(duree/60)-(heures*60);
					minutes=Math.floor(minutes);
 
 
					addInfo( vilA + " -> " + vilB + " distance : " + distance + "km" + " duree : " + heures + "h" + minutes + "min" + "<br />");
 
				});
 
			}
 
		}
 
	});
}

Je n'ai toujours que la derniere ligne, et maintenant j'ai ca :
"[object Object] -> undefined distance : 33km duree : 0h31min"

au lieu de ca :

"brest -> lyon distance : 33km duree : 0h31min"

Citation:

Envoyé par alex7532

Je n'ai toujours que la derniere ligne, et maintenant j'ai ca :
"[object Object] -> undefined distance : 33km duree : 0h31min"

au lieu de ca :

"brest -> lyon distance : 33km duree : 0h31min"

<humour>
je connaissais la rue de brest à lyon mais d'ici aller en bretagne en 31 mn c'est de chez top
</humour>
C'est déjà bien tu récupères déjà quelque chose !
es tu sûr de tes datas, la forme, la récupération

Maintenant autre chose concernant ta fonction
est-il normal de réaliser plusieurs fois la même chose avec les même données, exemple

Citation:

directions = new GDirections(map, directionsPanel);

ne te faudrait-il pas passer également par un tableau...?
Code:

1 2 3 4 direct[i/6] = new GDirections(map, directionsPanel); direct[i/6].load("from: " + latA + ", " + longA + " to: " + latB + ", " + longB); GEvent.addListener(direc[i/6], "load", function (vilA, vilB) { ... la suite
avec bien sur
Code:

1 2 3 var direct = []; // declaration tableau for (i = 0; i < length - 1; i++) { ... la suite
à voir la possibilité de sortir de la boucle
Code:

1 2 3 4 5 map = new GMap2(document.getElementById("map_canvas")); map.addControl(new GLargeMapControl3D()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(47.082999, 2.395692), 6); directionsPanel = document.getElementById("map_directions");
voila difficile d'en dire plus je ne connais pas l'API GoogleMap

Peut être une page en ligne pour voir le global...

06/03/2011, 22h44
alex7532

pour les villes brest lyon j'ai remplacé a la main, donc en effet les données ne correspondent pas ^^

Mais au niveau de mes data je recupere tout parfaitement.

Malheureusement ça ne donne rien en passant par un tableau, en mettant les variables a l'exterieur ou a l'interieur de la boucle.

Pourquoi est ce qu'avec l'alerte en début de boucle, tout se passe bien ?

Merci

Citation:

Envoyé par alex7532

Pourquoi est ce qu'avec l'alerte en début de boucle, tout se passe bien ?

j'ai la vue qui baisse, pas vu le problème de closure, utilise cette syntaxe

Code:

1
2
3
4
5
6
7
8
9
10
11
(function (vilA, vilB){
  GEvent.addListener(directions, "load", function (){
    var distance = directions.getDistance().meters;
    distance = Math.floor(distance / 1000);
    var duree = directions.getDuration().seconds;
    var heures = Math.floor(duree / 3600);
    var minutes = (duree / 60) - (heures * 60);
    minutes = Math.floor(minutes);
    addInfo(vilA + " -> " + vilB + " distance : " + distance + "km" + " duree : " + heures + "h" + minutes + "min" + "<br />");
  });
})(vilA, vilB);

07/03/2011, 13h17
alex7532

Je n'ai toujours que le dernier element qui s'affiche

Je viens de lire un tuto sur les closures, est ce qu'il ne faudrait pas capturer la valeur "i" de la boucle ?

Victoire !

C'était bien un problème de closure mais au niveau de la variable 'i'.
Je ne connaissais pas ce problème.

Code:

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
function ajoutSuccessif(inVilleDep,inVilleArr,inVillesArret,divEcriture) {
 
	idVilleDep = document.getElementById(""+inVilleDep+"").value;
	idVilleArr = document.getElementById(""+inVilleArr+"").value;
	idVillesArret = document.getElementById(""+inVillesArret+"").value;
 
	$.post("repAjout.php", {idVDep: ""+idVilleDep+"", idVArr: ""+idVilleArr+"", idVarrets: ""+idVillesArret+"", div: ""+divEcriture+""}, function(data){
 
		var i=0;
		var total ="";
		var traj ="";
		var sommeduree=0;
		var sommedistance=0;
		var res = "";
		res = data.split('/');
		var length = res.length;
 
		for(i=0;i<length-1;i++){
 
			if (i%6==0){
 
			   (function (i){                   //LA SOLUTION
				var vilA = ""+res[i]+"";
				var vilB = ""+res[i+1]+"";
				var latA = res[i+2];
				var longA = res[i+3];
				var latB = res[i+4];
				var longB = res[i+5];
 
				var directions;
				var directionsPanel;
				var map;
 
				directionsPanel = document.getElementById("map_directions");
				map = new GMap2(document.getElementById("map_canvas"));
				map.addControl(new GLargeMapControl3D());
				map.addControl(new GMapTypeControl());
				map.setCenter(new GLatLng(47.082999, 2.395692), 6);
				directions = new GDirections(map, directionsPanel);
				directions.load("from: "+latA+", "+longA+" to: "+latB+", "+longB);
 
			   (function (vilA, vilB){
				GEvent.addListener(directions,"load", function() {
					var distance = directions.getDistance().meters;
					distance=Math.floor(distance/1000);
					var duree = directions.getDuration().seconds;
					var heures=Math.floor(duree/3600);
					var minutes=(duree/60)-(heures*60);
					minutes=Math.floor(minutes);
 
					addInfo( vilA + " -> " + vilB + " distance : " + distance + "km" + " duree : " + heures + "h" + minutes + "min" + "<br />");
 
 
				});
				})(vilA, vilB);
 
				})(i);                       //LA SOLUTION
			}
 
		}
 
	});
}

Merci de m'avoir aidé !

07/03/2011, 16h16
NoSmoking
Citation:

C'était bien un problème de closure mais au niveau de la variable 'i'.

:koi:
as tu le même problème si tu écris ta boucle de la sorte
Code:

1 2 3 4 for( i=0; i<length-1; i+=6){ // if (i%6==0){ // ...le code .. //} /* end of i%6
et au fait pourquoi i<length-1?
07/03/2011, 19h29
alex7532

Citation:

as tu le même problème si tu écris ta boucle de la sorte[...]

Oui, ça ne me rend encore que le dernier élément.

Citation:

et au fait pourquoi i<length-1?

"length-1" c'est parce que je recois ça dans data par exemple :

"Tréguier/Lannion/48.787346/-3.230112/48.7320391/-3.4586793/Lannion/Guingamp/48.7320391/-3.4586793/48.5602042/-3.1444139/"

j'ai les noms des villes suivis des latitudes et longitudes respectives.

Quand je fais "res = data.split("/");" res contient un élément vide a cause du dernier slash donc il ne faut pas que je le considere dans ma boucle.
07/03/2011, 19h42
SpaceFrog

ça ne rejoindrait pas ce post par hasard ?
http://javascript.developpez.com/faq...lick.dynamique

Citation:

Envoyé par SpaceFrog

ça ne rejoindrait pas ce post par hasard ?
http://javascript.developpez.com/faq...lick.dynamique

un petit peu qu'en même, c'est le pourquoi de la closure, mais il n'y a pas que cela....

Citation:

Envoyé par alex7532

"Tréguier/Lannion/48.787346/-3.230112/48.7320391/-3.4586793/Lannion/Guingamp/48.7320391/-3.4586793/48.5602042/-3.1444139/"

voila une autre origine du problème.

Bon commençons par revoir la fonction pour la rendre un peu plus javascriptement correcte

- déclaration des variables en début, et uniquement ce dont à besoin
Code:

1 2 // les variables var i, vilA, vilB, map, directionsPanel, directions;
- concernant les datas on peut faire de cette façon
Code:

1 2 var res = data.split('/'); // mets en tableau res.pop(); // supprime le dernier
- ensuite viennent les initialisations, hors boucle, des éléments qui ne bougent pas
Code:

1 2 3 4 5 6 7 // initialisation hors de la boucle map = new GMap2(document.getElementById("map_canvas")); map.addControl(new GLargeMapControl3D()); map.addControl(new GMapTypeControl()); map.setCenter (new GLatLng(47.082999, 2.395692), 6); directionsPanel = document.getElementById("map_directions");
- passons à la boucle, avec une incrémentation de 6 pour éviter le calcul modulo
Code:

1 2 3 4 5 6 7 for( i=0; i< res.length; i+=6){ // recup des villes vilA = res[i]; vilB = res[i+1]; // init objet directions = new GDirections(map, directionsPanel); directions.load("from: " + vilA+", fr to: " +vilB +", fr");
- la fonction avec le premier soucis, on notera que dans celle ci on utilisera this et non la variable directions, qui n'existera plus lors de la réalisation de celle ci
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 (function (vilA, vilB){ GEvent.addListener( directions, "load", function (){ // utilisation de this dans l'objet var distance = this.getDistance().meters; var duree = this.getDuration().seconds; distance = Math.floor(distance / 1000); var heures = Math.floor(duree / 3600); var minutes = (duree / 60) - (heures * 60); minutes = Math.floor(minutes); addInfo(vilA + " -> " + vilB + " distance : " + distance + "km" + " duree : " + heures + "h" + minutes + "min" + "<br />"); }); })( vilA, vilB); } }
cela donne la fonction au presque complet, entête non comprise, je te laisse la mettre...
Code:

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 // les variables var i, vilA, vilB, map, directionsPanel, directions; var res = data.split('/'); // mets en tableau res.pop(); // supprime le dernier // initialisation hors de la boucle map = new GMap2(document.getElementById("map_canvas")); map.addControl(new GLargeMapControl3D()); map.addControl(new GMapTypeControl()); map.setCenter (new GLatLng(47.082999, 2.395692), 6); directionsPanel = document.getElementById("map_directions"); for( i=0; i< data.length; i+=6){ // recup des villes vilA = res[i]; vilB = res[i+1]; // init objet directions = new GDirections(map, directionsPanel); directions.load("from: " + vilA+", fr to: " +vilB +", fr"); (function (vilA, vilB){ GEvent.addListener( directions, "load", function (){ // utilisation de this dans l'objet var distance = this.getDistance().meters; var duree = this.getDuration().seconds; distance = Math.floor(distance / 1000); var heures = Math.floor(duree / 3600); var minutes = (duree / 60) - (heures * 60); minutes = Math.floor(minutes); addInfo(vilA + " -> " + vilB + " distance : " + distance + "km" + " duree : " + heures + "h" + minutes + "min" + "<br />"); }); })( vilA, vilB); } }
jusque là tout est OK, mais alors pourquoi cela ne marche toujours pas?
.. à cause de Tréguier, ou plus exactement é et son accent.

Il y a fort à parier que tu as une balise meta du style

Code:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

remplace la par une

Code:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

voila je crois ne rien avoir oublié et ne pas mettre planter...