Javascript-und VERY-LONG-string

ich habe Probleme mit dem folgenden code:

function showTableData()
{
    var tableArray;
    var x = 0;
    var theHTML;

    for (i = 0; i < 7032; i++)
    {
        if (x = 0)
        {
            theHTML = '<tr>' + 
                '<th scope="row" class="spec">' + partNum[i] + '</th>' + 
                '<td>' + Msrp[i] + '</td>' + 
                '<td>' + blah[i] + '</td>' + 
                '<td>' + blahs[i] + '</td>' + 
            '</tr>' + theHTML;
            x++;
        }else{
            theHTML = '<tr>' + 
                '<th scope="row" class="specalt">' + partNum[i] + '</th>' + 
                '<td class="alt">' + Msrp[i] + '</td>' + 
                '<td class="alt">' + blah[i] + '</td>' + 
                '<td class="alt">' + blahs[i] + '</td>' + 
            '</tr>' + theHTML;
            x--;
        }
    }
    theHTML = '<table id="mytable" cellspacing="0">' + 
    '<tr>' + 
        '<th scope="col" abbr="Configurations" class="nobg">Part Number</th>' + 
        '<th scope="col" abbr="Dual 1.8">Msrp Price</th>' + 
        '<th scope="col" abbr="Dual 2">blahs Price</th>' + 
    '<th scope="col" abbr="Dual 2.5">Low Price</th>' + 
    '</tr>' + theHTML + '</table>';

    $('#example').append(theHTML);
}
 </script>

 <div id="example">
 </div>

Das problem ist, dass das $('#Beispiel').append(theHTML); nie ausgeführt wird (oder zeigt auf der Seite). Ich denke, es ist, weil der string ist soooooo lang! Es hat über 7000 Elemente im array, so dass im nicht sicher, ob das ist der Grund, oder wenn Ihr etwas anderes?

Jede Hilfe würde groß sein! Danke!

David

if (x=0) (Zeile 9) if (x==0) weiß nicht, ob das nur ein Tippfehler, obwohl
Sind Sie sicher, dass die Funktion aufgerufen wurde, richtig?
Einige Ratschläge. Erstellen Sie ein array mit push anstelle des string-Verkettung. Dann nutzen Sie array.join('') bevor Sie fügen Sie den html -. Bessere Leistung.
Danke, Hemlock. Behoben der Fehler.

InformationsquelleAutor StealthRT | 2011-01-09

  1. 10

    Abgesehen von der if (x = 0) dass sollte wirklich if (i % 2 === 0), sollten Sie wirklich verbessern die Leistung hier durch die Verwendung von Array.join () - Methode anstelle der Verkettung von Zeichenfolgen. Diese haben eine ähnliche Wirkung wie ein StringBuilder in C# oder Java.

    Beispiel:

    function showTableData()
{
    var tableArray;
    var theHTML = [];
    theHTML.push('<table id="mytable" cellspacing="0">',
    '<tr>', 
        '<th scope="col" abbr="Configurations" class="nobg">Part Number</th>', 
        '<th scope="col" abbr="Dual 1.8">Msrp Price</th>',
        '<th scope="col" abbr="Dual 2">blahs Price</th>', 
    '<th scope="col" abbr="Dual 2.5">Low Price</th>', 
    '</tr>');

    for (var i = 0; i < 7032; i++)
    {
        if (i % 2 == 0)
        {
             theHTML.push('<tr>', 
                 '<th scope="row" class="spec">', partNum[i], '</th>',
                 '<td>', Msrp[i], '</td>', 
                 '<td>', blah[i], '</td>', 
                 '<td>', blahs[i], '</td>', 
             '</tr>');
        } else {
             theHTML.push('<tr>',
                 '<th scope="row" class="specalt">', partNum[i], '</th>', 
                 '<td class="alt">', Msrp[i], '</td>', 
                 '<td class="alt">', blah[i], '</td>', 
                 '<td class="alt">', blahs[i], '</td>',
             '</tr>');
        }
    }
    theHTML.push('</table>');

    $('#example').append(theHTML.join(''));
}
 </script>

 <div id="example">
 </div>

    Der Grund, warum anfügen string 'my' + ' appended' + ' string' ist langsamer als das verbinden von strings ['my', ' joined', ' string'].join('') ist, weil JavaScript-strings sind unveränderlich also in dem vorherigen Beispiel gibt es eine Dritte Zeichenfolge erstellt, jedes mal 2 strings verkettet werden, was eine sehr teure operation ist im Vergleich zum hinzufügen neuer Einträge in einem array.

    Finden Sie auch eine Javascript StringBuilder-Projekt erbaut die priciples von Array.push() und Array.join().

    Verbesserung der Leistung bei diesem Projekt für 10.000 Verkettungen in IE war bis über 1 minute auf 0,23 Sekunden.

    UPDATE: Zusätzliche Aufrufe Array.join () - Hinzugefügt zu ersetzen-string-Verkettung innerhalb der for-Schleife, diese ist zu verbessern-client die rendering-Geschwindigkeit weiter. + Hinzugefügt link besser auf die Klasse StringBuilder.

    WEITERES UPDATE: Hinzugefügt Vorschläge von Hemlock:

    1. Entfernt, verwenden von Global variable durch die Definition var i = 0 in der for-Schleife
    2. Schob mehrere Saiten gleichzeitig mit mehreren Parameter-Array.push().
    Genial, Steven. Das funktionierte so wie es sollte! Und die SCHNELLE!!!! Danke! :o)
    Kann auch noch vieles getan werden, mit diesem code. Das Schlimmste problem ist, dass i wird nie erklärt, s/b for var i=0;. Es gibt keine Notwendigkeit für die zusätzlichen arrays, nur eine Verknüpfung ist notwendig, da schieben kann mehrere Argumente akzeptieren. Ich verstehe nicht, warum sich alle, dass code wiederholt werden, um fügen Sie die Zeilen, wie es aussieht, ist nur da, um hinzuzufügen, alt-styling. Getan werden kann, mit einer Klasse an der tr und ein paar anständige css. Hier ist ein Beispiel: jsbin.com/itego4/3/edit
    Ich habe änderungen vorgenommen, um push-Anweisung und lokal Gültigkeitsbereich von var, aber Links, wenn-dann-sonst-und css-unberührt, während ich mit Ihnen einig, dass man ich denke, die wird über den Anwendungsbereich der Frage-und-css ändern kann, haben andere Nebenwirkungen.
    sehr schön @steven - ich hatte keine Idee, die ich anbringen könnte lange html-Zeichenfolgen wie 😉
    Meine tests auf jsperf.com/string-concat-without-sringbuilder/3 zeigen, dass ein StringBuilder schadet mehr als es nützt (Methode overhead), und dass die string-Verkettung ist schneller als die Array.join trick... Pflege zu kommentieren?

    InformationsquelleAutor Steven de Salas

  2. 3

    einen Fehler, die ich sah, war, dass if (x = 0) sollte if (x == 0) eine andere als die, es scheint für mich arbeiten: http://jsfiddle.net/9vvJ6/

    Vielen Dank, Alex. Behoben der Fehler.

    InformationsquelleAutor Alex

  3. 2

    Diese Zeile:

    if (x = 0)

    sollte es nicht 

    if (x == 0)

    Könnte der Fehler hier verursacht der rest des Skripts können nicht ausgeführt werden.

    Danke, thephpdeveloper. Behoben der Fehler.
    wenn (x = 0) ist korrekt, syntax. Es wird nicht einen Fehler verursachen. wenn assining 0 bis x erfolgreich ist, wahr...

    InformationsquelleAutor mauris

  4. 1

    Wenn Sie bereits mit jQuery hier, möchten Sie vielleicht zu prüfen, jQuery templates hier, würde es wahrscheinlich bereinigen Sie Ihren code ganz ein bisschen und machen Ihr Leben leichter. Kann es performance-Nachteile (aber ich denke, dass string-interpolation ist schneller als bei der Verkettung von Strings in JavaScript, so könnte dies sogar schneller?), aber was können Sie oder können nicht verlieren in der Leistung, es ist eine viel elegantere Lösung. Sie könnten halten Sie Ihre gesamte Vorlage in einem Ort (vielleicht eine externe Datei, oder Teile von ihm, versteckt in den DOM des Dokuments, ich habe nicht verwendet es genug, zu sagen, was die beste Praxis ist), und dann die jQuery-Vorlagen zu tun, die Zeichenfolgen ersetzen. Es gibt mehrere jQuery-basierte template-frameworks, aber die, die ich verlinkte, ist immer ein offizieller Teil von jQuery.

    InformationsquelleAutor carpeliam

  5. 1

    Problem ist .append jquery-Funktion. Sie nicht verwenden können .html-oder .append-Funktion für einen langen string. Stattdessen müssen Sie verwenden .innerHTML

    Versuchen, diese

    document.getElementById('example').innerHTML=theHTML.join('');
    Dies ist nicht unbedingt wahr. Wie bereits in der jquery-Dokumentation: "Das [html] - Methode verwendet der browser innerHTML-Eigenschaft" (api.jquery.com/html/#html2).
    Es ist erwähnenswert, dass html() fast doppelt so langsam wie mit innerHTML direkt (stackoverflow.com/questions/1063303/...).

    InformationsquelleAutor user2106107

Schreibe einen Kommentar