Client-Seite JavaScript aktivieren, Schaffung von mehreren Elementen und zeigen jeweils so schnell wie möglich

StackOverflow https://stackoverflow.com/questions/2408292

Frage

Client-Seite JavaScript-Code einige Elemente (etwa 50 bis 100) in einem Zyklus erzeugt: 

for (var i = 0; i < list.length; i++) {
   var obj = document.createElement("DIV");
   obj.innerHTML = "<span class=\"itemId\">" + list[i].Id 
                   + "</span><!-- some more simple code --> ";

   mainObj.appendChild(obj);
}

Es gibt einige Probleme mit Browser-Rendering. Zum Beispiel IE friert nur, bis sie den Zyklus beendet hat, und zeigt dann alle Elemente auf einmal. Gibt es eine Möglichkeit jedes Element separat erstellt und unmittelbar nach appendChild() zu zeigen?

War es hilfreich?

Lösung

Einfügen einer Verzögerung zwischen aufeinanderfolgenden Zugabe von Einträgen, mit setTimeout(). 

function insertEntry(list, ix) {
    if (ix == null) {
        ix = 0;
    }
    else if (ix < list.length) {
        var elt= document.createElement("DIV");
        var attr = document.createAttribute('id');
        attr.value = 'item'+ix;
        elt.setAttributeNode(attr);
        elt.innerHTML = "<span class='itemCls'>" + list[ix].Id + ':&nbsp;' + list[ix].Name +
            "</span><!-- some more simple code -->\n";
        mainObj.appendChild(elt);
        ix++;
    }
    if (ix < list.length) {
        setTimeout(function(){insertEntry(list, ix);}, 20);
    }
}

Kick it off mit: 

    insertEntry(myList);

wo myList ist wie folgt: 

var myList = [
    { Id : '1938377', Name : 'Sven'},
    { Id : '1398737', Name : 'Walt'},
    { Id : '9137387', Name : 'Edie'}
    ...
 };

Demo: http://jsbin.com/ehogo/4

Andere Tipps

Dies ist auf die Single-Threaded Art von Browsern. Rendering wird erst beginnen, wenn der Thread frei wird. In diesem Fall ist es, wenn Sie Ihre Schleife abgeschlossen ist und die Funktion beendet. Der einzige Weg, um dies zu (Art) mehr Threads mit Timer simulieren, etwa so: 

var timer,
    i = 0,
    max = list.length;

timer = window.setInterval(function ()
{
    if (i < max)
    {
        var obj = document.createElement("DIV");  
        obj.innerHTML = "<span class=\"itemId\">" + list[i].Id   
                + "</span><!-- some more simple code --> ";  

        mainObj.appendChild(obj);
        i++;
    }
    else
        window.clearInterval(timer);
}, 1);

Der offensichtliche Nachteil ist, dass diese länger die Schleife in Anspruch nehmen wird abgeschlossen werden, da es zwischendurch jede Iteration die Wiedergabe passt,.

Ich Wold tut es so mit jQuery statt: 

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(document).ready(function() {
            timer = window.setInterval(function ()
            {
                for (var i = 0; i < 100; i++) {
                    $('#container').append('<div>testing</div><br />');
                }
            },10);
        });
    </script>
</head>
<body>
<div id="container"></div>

</body>
</html>

jQuery tut es so schnell, Sie werden nicht einmal brauchen darum zu zeigen, zu stören, wie sie erstellt werden, aber man kann es glatter durch einen Timer Hinzufügen wie das Beispiel zeigt.

Gibt es einen bestimmten Grund, warum Sie den DOM wollen nach jedem Zyklus aktualisiert werden? Es wäre viel schneller, wenn Sie in einem JavaScript-Element alle Elemente erstellen, und fügen Sie diese ein Element auf das DOM, wenn der Zyklus beendet ist. 

var holder = document.createElement("DIV");
for (var i = 0; i < list.Length; i++) {
   var obj = document.createElement("DIV");
   obj.innerHTML = "<span class=\"itemId\">" + list[i].Id 
                   + "</span><!-- some more simple code --> ";

   holder.appendChild(obj);
}
mainObj.appendChild(holder);
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top