[JS] Grote array's en loops..

[Webby_143]

ik heb een pagina waar 10 selectlists met dezelfde content gevuld moeten worden. Het probleem is dat er zo'n 1500 (en groeiend) aantal items in elke list komen wat de broncode nu al 1.7Mb maakt.
Ik heb via java alle items in een array gedumpt en loop via een loop daardoor, zodat de size nu 279Kb is.

Dit is de functie:

code:

function fillSelect(foo) {
    eval("document.pagina." + foo + ".length = 0;");
    eval("document.pagina." + foo + "[0] = new Option(\"<Geen pagina gekozen>\");");
    eval("document.pagina." + foo + "[0].selected = true;");
    for (i=1; i <= inhoud.length-1; i++)
    {   q = inhoud[i-1];
        tekst = q[0];
        id = q[1];
        eval("document.pagina." + foo + "[i] = new Option(tekst, id);");
    }
    eval("document.pagina." + foo + ".selected = 0;");
}
</script>

Het probleem is nu dat iexploder crasht op de loop. Als ik het aantal items terugbreng naar 250 duurt het zo'n 10 a 15 secs, maar op de volle 1500 crasht ie

Iemand enig id wat ik hier aan kan doen

[crisp]

Begin eens met die evals eruit slopen (traag vies en onnodig) en daarvoor dit in de plaats te doen:

JavaScript:

document.forms['pagina'].elements[foo].length = 0;
...etc

[BtM909]

Zonder te kijken naar je manier om door die array heen te fietsen:

Eval is bah! Als je die eruit sloopt, lukt het dan wel?

Kan je misschien ook die bron ff ergens online zetten, dan kan ik kunnen we een paar testjes doen.

edit:
trager dan traag ......

[ Voor 9% gewijzigd door BtM909 op 28-02-2003 14:58 ]

[Webby_143]

ik ben ff de evals er uit aan het slopen ...

[Bosmonster]

Dus je gaat werkelijk een pagina maken met 10 lists met elk 1500+ items... en dan vind je het gek dat het niet soepel loopt...

Tuurlijk zijn er wel manieren te bedenken om het efficienter te maken.. maar dank dat je in de eerste plaats eens beter moet kijken naar je ontwerp...

De "new Option()" methode is ook erg traag trouwens. Beter is om gewoon een string-representatie van de options te genereren en deze in de select innerHTML te plaatsen. Deze kun je dan ook 10x gebruiken

[ Voor 28% gewijzigd door Bosmonster op 28-02-2003 15:13 ]

[Webby_143]

Alle evals zijn er uit, maar het crast iexplore nogsteeds

http://netserver1.net/webby/js_prob.html

iig tnx so far ... weer wat geleerd

[Webby_143]

hoe werkt innerHTML precies?

JavaScript:

    document.getElementById("bullet").innerHTML = document.getElementById("bullet").innerHTML + "<option value=\"bleh\">blaat</option>";

[Webby_143]

<select id="bullet"></select> hoor ook nog bij het bovenstaande, maar dit klopt nog niet?

[Bosmonster]

de getElementById-lookup is ook niet al te vlot en hier ook overbodig. Stel eerst de string samen en plaats die in de select.

dit zou gewoon moeten werken met de code die je hierboven gebruikt.

code:

document.getElementById("bullet").innerHTML = optionsString;

Vreemd, lijkt een bugje te zitten in de manier waarop IE dit pakt (hij misvormt de HTML die je erin wilt plaatsen).. eens kijken hoe ik dat eerder gedaan heb..

Of McVirus, jij had toch al eens zoiets gemaakt ?

[ Voor 29% gewijzigd door Bosmonster op 28-02-2003 17:59 ]

[Verwijderd]

Ik heb ook wel eens met gote arrays gewerkt. Wellicht kun je een *.js file met stukken array toevoegen op het moment dat je het nodig hebt.

code:

function addScript(src)
{
if(document.getElementsByTagName && document.createElement)
{
var newScript =document.createElement("script");
newScript.type = "text/javascript";newScript.src=src;
document.getElementsByTagName("head")[0].appendChild(newScript);
}
}

[Verwijderd]

Mijn ervaringen met het dynamisch vullen van select's:

• De lijst leegmaken met .options.length=0 kan timing problemen geven in IE6. Ik heb dat toen opgelost, door de code achter het leegmaken uit te voeren met een setTimeout.
• Als je de HTML op gaat bouwen, kun je dat het beste met een array doen (als je s=s+'<option>' doet wordt dat bloed-traag..):

PHP:

var a=new Array();
for(var i=0; i<inhoud.length; i++)
{
  q=inhoud[i];
  a[a.length] = '<option value="'+q.id+'">'+q.text+'</option>';
}
var deOptions=a.join();

[ Voor 11% gewijzigd door Verwijderd op 01-03-2003 11:54 . Reden: typefout ]

[Bosmonster]

Yup.. grote strings samenstellen altijd via array, is zo'n 40-50x sneller dan concatenaten.

Voorbeeldje (wees geduldig met manier 1, kan aardige tijd duren). Tijden in millisecondes:

concatenate testje