Discussion :

[ProgElecT]

Salut

Dans un code qui fonctionne, je voudrais optimiser le remplissage de 2 <select>, id="indicatif1" et id="indicatif2".
Dans ma version de base j'ai 2 boucles for.

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
				for (i = 0; i < dataOM.length; i++) {
					z = document.createElement("option");
					z.setAttribute("value", dataOM[i].indicatif);
					z.setAttribute("id", "choix" + i);
					t = document.createTextNode(dataOM[i].indicatif);
					z.appendChild(t);
					document.getElementById("indicatif1").appendChild(z);
					if (dataOM[i].indicatif == nomindicatif){numidx=i;}
				}
				document.getElementById("nbr").innerHTML = "Listage " + dataOM.length + " indicatifs";
				document.getElementById("indicatif1").selectedIndex = numidx;
				affiche("indicatif1");
				for (i = 0; i < dataOM.length; i++) {
					z = document.createElement("option");
					z.setAttribute("value", dataOM[i].indicatif);
					z.setAttribute("id", "choix" + i);
					t = document.createTextNode(dataOM[i].indicatif);
					z.appendChild(t);
					document.getElementById("indicatif2").appendChild(z);
				}

Mes 2 select se remplissent correctement.

Par contre si je modifie de cette façon

Code :

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

1
2
3
4
5
6
7
8
9
10
				for (i = 0; i < dataOM.length; i++) {
					z = document.createElement("option");
					z.setAttribute("value", dataOM[i].indicatif);
					z.setAttribute("id", "choix" + i);
					t = document.createTextNode(dataOM[i].indicatif);
					z.appendChild(t);
					document.getElementById("indicatif1").appendChild(z);
					document.getElementById("indicatif2").appendChild(z);
					if (dataOM[i].indicatif == nomindicatif){numidx=i;}
				}

Ben là , je n'ai que le <select> id="indicatif2" qui est rempli.
Je suis super déçu, je croyais, depuis maintenant 1 an et demi que je me suis mis au JavaScript, avoir compris le minimum des choses, ben non apparemment.

Une petite explication s'il vous plait

[psychadelic]

bon, puisque dans le titre il est question d'optimisation, alors vite fait au moins 2 ou 3 choses:
for (i = 0; i < dataOM.length; i++) à chaque itération l'interprétreur JS en passe par une évaluation de cette valeur, ce qui fait perdre du temps, c'est minime, mais les petits ruisseaux font de grandes rivières.
Donc préférer écrire :
for (let i = 0, iMax =dataOM.length ; i < iMax ; i++)au passage, l'ajout du let pour les 2 variables (i et iMax) permet de s’assurer qu'il n'y aura pas de pb de collusion sur la portée d'un i ou d'un iMax ailleurs

même idée pour document.getElementById("indicatif1").appendChild(z); inscrit à l'intérieur de la boucle : l'interpréteur JS doit aussi réévaluer cette valeur à jaque tour de boucle, ce qui prend un peu plus de temps encore que le "truc" précédent.

déclarer ainsi:

Code :

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

1
2
3
4
5
6
 
var Indicatif_1 = document.getElementById("indicatif1");
//...
for (let i = 0, iMax =dataOM.length ; i < iMax ; i++) {
//..
  Indicatif_1.appendChild(z);

Pour ton bugg j'ai pas regardé, peut-être plus tard, si personne ne t'a répondu d'ici la

[ProgElecT]

Ok, merci de ces informations, c'est déjà sa de pris et d'appris.

[tsuji]

En ce qui concerne l'optimisation, l'opération qui coûte un peu plus est getElementById() et on peut facilement diminuer la fréquence de la faire appeler. Et puis, les autres, c'est minime.

En ce qui concerne fonctionnel, le problème est de réaliser que z est une référence d'un objet. Où se trouve-il finalement ? La dernière opération de le placer. Pour corriger, on crée un clone, clone dit profond, d'elle et place le clone dans indicatif2.

En somme, comme ça.

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
                                var indicatif1=document.getElementById("indicatif1");
                                var indicatif2=document.getElementById("indicatif2");
				for (var i = 0; i < dataOM.length; i++) {
					var z = document.createElement("option");
					z.setAttribute("value", dataOM[i].indicatif);
					z.setAttribute("id", "choix" + i);
					var t = document.createTextNode(dataOM[i].indicatif);
					z.appendChild(t);
 
					indicatif1.appendChild(z);
					indicatif2.appendChild(z.cloneNode(true));
 
					if (dataOM[i].indicatif == nomindicatif){numidx=i;}
				}

[ProgElecT]

Merci tsuji, c'est impeccable, cela fonctionne bien sûr.

Merci aussi à psychadelic, à vous deux je fini l'année un peu moins bête.

En attendant je vais regarder cette hstoire de .cloneNode pour en savoir plus.

Bonne année à chacun et aux lecteurs de cette discussion.

[psychadelic]

effectivement le Bugg est bien celui la, 1 element crée reste unique, et il ne peut pas être à 2 endroits à la fois.

Il y a eu tout un débat sémantique ici (je ne retrouve pas ou) sur la signification / traduction du mot anglais "append", dont pour moi la meilleure traduction possible est le terme "advenir" ( il doit y avoir du Latin genre "faire venir" ).

Toujours est il que la doc MDN est tres claire sur le sujet : https://developer.mozilla.org/fr/doc...de/appendChild

Cela signifie qu'un noeud ne peut pas être à deux points du document simultanément. Donc, si le nœud a déjà un parent, le nœud est d'abord retiré, puis ajouté à la nouvelle position.

[EDIT] et bonne année à vous aussi, ainsi qu'a tous ceux qui sont passé par la

[tsuji]

Bonne année à vous aussi, ProgElecT; et à tout le monde !