Discussion :

[alex7532]

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 :

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
 
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

[NoSmoking]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

mais que vaut divEcriture ?

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function addInfo( info){
  var oDiv = document.getElementById("div_info");
  oDiv.innerHTML += info;
}

que tu appelles dans ta fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 />");
});

[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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[alex7532]

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
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"

[NoSmoking]

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

directions = new GDirections(map, directionsPanel);

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

[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

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);

[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 ?

[alex7532]

Victoire !

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

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
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é !

[NoSmoking]

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

[alex7532]

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.

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.

[SpaceFrog]

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

[NoSmoking]

ç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....

"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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  // les variables
  var i, vilA, vilB, map, directionsPanel, directions;

- concernant les datas on peut faire de cette façon

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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
  // 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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

remplace la par une

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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