IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Simplifier/optimiser boucle for pour création d'éléments option


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Expert confirmé
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 130
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 130
    Par défaut Simplifier/optimiser boucle for pour création d'éléments option
    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
    :whistle:pourquoi pas, pour remercier, un :plusser: pour celui/ceux qui vous ont dépannés.
    saut de ligne
    OOOOOOOOO👉 → → Ma page perso sur DVP ← ← 👈

  2. #2
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    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

  3. #3
    Expert confirmé
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 130
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 130
    Par défaut
    Ok, merci de ces informations, c'est déjà sa de pris et d'appris.
    :whistle:pourquoi pas, pour remercier, un :plusser: pour celui/ceux qui vous ont dépannés.
    saut de ligne
    OOOOOOOOO👉 → → Ma page perso sur DVP ← ← 👈

  4. #4
    Membre Expert Avatar de tsuji
    Inscrit en
    Octobre 2011
    Messages
    1 558
    Détails du profil
    Informations forums :
    Inscription : Octobre 2011
    Messages : 1 558
    Par défaut
    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;}
    				}

  5. #5
    Expert confirmé
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 130
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 130
    Par défaut
    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.
    :whistle:pourquoi pas, pour remercier, un :plusser: pour celui/ceux qui vous ont dépannés.
    saut de ligne
    OOOOOOOOO👉 → → Ma page perso sur DVP ← ← 👈

  6. #6
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    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

  7. #7
    Membre Expert Avatar de tsuji
    Inscrit en
    Octobre 2011
    Messages
    1 558
    Détails du profil
    Informations forums :
    Inscription : Octobre 2011
    Messages : 1 558
    Par défaut
    Bonne année à vous aussi, ProgElecT; et à tout le monde !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Boucle for pour renommé les éléments d'une liste
    Par Groscaramel dans le forum R
    Réponses: 2
    Dernier message: 20/09/2018, 10h20
  2. création d'une boucle for pour interrogation requête sql
    Par philder62 dans le forum Macros et VBA Excel
    Réponses: 2
    Dernier message: 10/12/2007, 15h14
  3. Réponses: 7
    Dernier message: 10/10/2007, 19h23
  4. [Optimisation] Boucles for ou while et mysql_result ?
    Par sorenson dans le forum Langage
    Réponses: 5
    Dernier message: 22/12/2006, 09h55
  5. Réponses: 2
    Dernier message: 29/08/2006, 13h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo