JavaScript lato client, la creazione di diversi elementi e mostrare ogni più presto

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

Domanda

JavaScript lato client codice crea alcuni elementi (circa 50-100) in un ciclo: 

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);
}

Ci sono alcuni problemi con il rendering del browser. Ad esempio, IE blocca solo fino al termine del ciclo, e quindi mostra tutti gli elementi contemporaneamente. C'è un modo per mostrare ogni elemento creato separatamente e immediatamente dopo appendChild()?

È stato utile?

Soluzione

inserire un ritardo tra l'aggiunta di voci successive, con 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);
    }
}

Calcio via con: 

    insertEntry(myList);

dove myList è come questo: 

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

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

Altri suggerimenti

Ciò è dovuto alla natura a thread singolo di browser. Resa non inizierà finché il filo diventa inattivo. In questo caso, è quando il ciclo è stato completato e la funzione di uscite. L'unico modo per aggirare questo è (quasi) simulare più thread utilizzando timer, in questo modo: 

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);

Lo svantaggio evidente è che questo richiederà il ciclo più tempo per completare perché è giusto il rendering inbetween ogni iterazione.

I wold fare in questo modo utilizzando jQuery , invece: 

<!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 lo fa così in fretta, non sarà nemmeno bisogno di preoccuparsi di mostrare come essi sono creati, ma si può rendere più agevole con l'aggiunta di un timer, come mostra l'esempio.

C'è un motivo specifico che si desidera che il DOM per essere aggiornato dopo ogni ciclo? Sarebbe molto più velocemente se si creano tutti gli elementi in un solo javascript elemento, e aggiungere questo elemento al DOM quando il ciclo è finito. 

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);
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top