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

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

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 :

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

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

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

[alex7532]

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"

[NoSmoking]

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

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

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

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

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

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 :

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]

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

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

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

remplace la par une

Code html :

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

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