Unbeabsichtigte Doppelschleifen in JavaScript

Question

Ich habe eine Anwendung erstellt, in der Sie eine Tabelle in einer Datenbank auswählen und dann die Daten auf einer Leaflet-Map anzeigen können. Die Daten haben eine übereinstimmende Legende.

Ich möchte, dass meine Anwendung eine Vielzahl von Datensätzen akzeptiert und in der Lage ist, sie mit minimalen Programmieränderungen auf der Karte anzuzeigen. Dies ist eine neue Anforderung und ich habe meinen vorherigen Code geändert, aber es ist nicht optimal.

Der Code, den ich jetzt habe, durchläuft das Dataset, um einem bestimmten Wert eine Farbe zuzuweisen, aber es durchläuft auch das Dataset, um die eindeutigen Werte zu extrahieren, sodass ich sie in der Legende verwenden kann.

Das verursacht, meine Anwendung eine Schleife in einer Schleife zu haben, die unnötige Berechnungen generiert. Dies ist kein Problem mit einem kleinen Datensatz, 19 Datensätze x19 ist machbar, aber 8062x8062 ...

Die for-Schleife in der getColor()-Funktion ist das Problem. Ich habe versucht, die for-Schleife zu einer neuen Funktion (getColor v2) zu verlagern, aber am Ende fehlt immer arrayMetKetens. Ich denke, getColor() läuft vor getArray() kann seinen Wert zurückgeben, aber weil viele Funktionen starten, sobald ich eine Tabelle auswählen, kann ich nicht wirklich getArray() zwingen, es schneller zurückzugeben. Oder ist es da?

-Code für das Hinzufügen von Farbe zu Marker/Polygone:

window["mapDataLayer"] = L.geoJson(geojson_dataTable, { 
    pointToLayer: function (feature, latlng) { 
     var markerStyle = { 
      fillColor: getColor(feature.properties.Fastfoodketen), 
      color: "#696969", 
      fillOpacity: 0.6, 
      opacity: 0.9, 
      weight: 1, 
      radius: 8 
     }; 
     return L.circleMarker(latlng, markerStyle); 
    }, 

    style: function (feature){ 
     if(feature.geometry.type === 'MultiPolygon'){ 
      var polygonStyle = { 
      fillColor: getColor(feature.properties.Naam), 
      color: "grey", 
      weight: 5, 
      opacity: 1 
      }; 
     } 
     else{ 
      return null; 
     } 
     return polygonStyle; 
    } 
}).addTo(map); 

getColor Funktion:

function getColor(keten) { 
    checkTable(); 
    var ketens = []; 

    for(i=0;i<(geojson_dataTable.features).length;i++){ 
     ketens = ketens.concat(Object.byString(geojson_dataTable, 'features['+i+'].properties.'+featureVoorSorteer)) 
    } 
    console.log(ketens); 
    arrayMetKetens = (jQuery.unique(ketens)); 
    var i = arrayMetKetens.indexOf(keten); 

    if (i !== -1) { 
     return arrayKleur[ i ]; 
     } 
    else { 
     return '#999999'; 
    } 
} 

getColor v2:

function getArray(){ 
    var ketens = []; 
    for(i=0;i<(geojson_dataTable.features).length;i++){ 
     ketens = ketens.concat(Object.byString(geojson_dataTable, 'features['+i+'].properties.'+featureVoorSorteer)) 
     console.log(ketens); 
    } 
    arrayMetKetens = (jQuery.unique(ketens)); 
    return arrayMetKetens. 
} 

function getColor(keten) { 
    checkTable(); 
    getArray(); 
    yMetKetens.indexOf(keten); 
    if (i !== -1) { 
     return arrayKleur[ i ]; 
     } 
    else { 
     return '#999999'; 
    } 
    console.log("hij doet het") 
} 

Answer 1

Zunächst einmal, wenn es Ihnen nichts ausmacht, dass ich den JS-Programmierstil kommentiere, ist dieser Code ... nun ... weit von perfekt :-) Besonders die indirekte Verwendung von globalen Variablen macht es schwierig zu lesen. Ich werde versuchen, es zu versuchen und etwas vorschlagen, das nicht bedeutet, "das Ganze neu zu schreiben".

Ich werde die Verwendung von globalen Variablen in Funktionen folgen, obwohl es allgemein als ein Anti-Muster betrachtet wird.

Das erste, was - wenn der Code, den Sie als „getColor v2“ hat die IST-Code ist, dann ist es offensichtlich, dass die Fehler in es:

function getColor(keten) { 
    checkTable(); 
    getArray(); 
    //yMetKetens.indexOf(keten);<-- looks like partialy copied code :-) 
    // SHOULD BE THIS: 
    var i = arrayMetKetens.indexOf(keten); 
    if (i !== -1) { 
     return arrayKleur[ i ]; 
     } 
    else { 
     return '#999999'; 
    } 
    console.log("hij doet het") 
} 

Mit diesem einen festen wir noch den Anruf zu getArray() haben jedes Mal, wenn wir Anruf getColor(). Aber zuerst einen Blick auf leicht verbesserte Version von getArray() hat lassen sie:

function getArray(){ 
    var ketens = []; 
    //for(i=0;i<(geojson_dataTable.features).length;i++){ 
    // ketens = ketens.concat(Object.byString(geojson_dataTable, 'features['+i+'].properties.'+featureVoorSorteer)) 
    // console.log(ketens); 
    //} 
    //THE CODE ABOVE CAN BE SIMPLY EXPRESSED AS 
    for(i=0;i < geojson_dataTable.features.length;i++){ 
     ketens = keten.concat(geojson_dataTable.features[i].properties[featureVoorSorteer]) 
    } 
    //lets use global variable arrayMetKetens explicitly 
    window.arrayMetKetens = jQuery.unique(ketens); 
    //return arrayMetKetens <-- we never use the return value of the function anyway... 

} 

jetzt können wir leicht unsere Funktion ändern getColor():

function getColor(keten) { 
    checkTable(); 
    //getArray(); <--REMOVE CALL TO getArray() 
    var i = window.arrayMetKetens.indexOf(keten);//<-- explicit use of global variable we initialise in getArray() 
    if (i !== -1) { 
     return arrayKleur[ i ]; 
     } 
    else { 
     return '#999999'; 
    } 
    console.log("hij doet het") 
} 

Und das letzte, was wir tun müssen, ist getArray() zu rufen, sobald wie wir geojson_dataTable Objekt zur Hand haben. Der Code, den Sie vorgelegt nicht, dass ein Teil haben, so dass es let'd hier zu setzen:

getArray();//<-- calling getArray() here will initialise (once) the array arrayMetKetens 
      // which then can be used in the function getColors() 
window["mapDataLayer"] = L.geoJson(geojson_dataTable, { 
    pointToLayer: function (feature, latlng) { 
     var markerStyle = { 
      fillColor: getColor(feature.properties.Fastfoodketen), 
      color: "#696969", 
      fillOpacity: 0.6, 
      opacity: 0.9, 
      weight: 1, 
      radius: 8 
     }; 

Das hat Spaß gemacht! :-) Ich hoffe, es hilft...;-)