javascript côté client, la création de plusieurs éléments et montrer chaque dès que possible

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

Question

code javascript côté client crée des éléments (environ 50-100) dans un cycle: 

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

Il y a quelques problèmes avec le rendu du navigateur. Par exemple, IE gèle jusqu'à ce qu'il se termine le cycle, et montre ensuite tous les éléments à la fois. Y at-il un moyen de montrer chaque élément créé séparément et immédiatement après appendChild()?

Était-ce utile?

La solution

insérer un délai entre l'ajout d'entrées successives, avec 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);
    }
}

le coup d'envoi avec: 

    insertEntry(myList);

où myList est comme ceci: 

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

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

Autres conseils

Ceci est dû à la nature des navigateurs seul thread. Le rendu ne commencera pas tant que le thread devient inactif. Dans ce cas, il est quand votre boucle est terminée et que la fonction sort. La seule façon de contourner cela est de (sorte de) simulent plusieurs threads en utilisant les temporisateurs, comme suit: 

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

L'inconvénient évident est que cela va prendre votre boucle plus longue pour terminer, car il est le montage du rendu inbetween chaque itération.

Je Wold faire comme ceci en utilisant jQuery à la place: 

<!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 fait si vite, vous aurez même pas besoin de se soucier de montrer qu'ils sont créés, mais vous pouvez le rendre plus lisse en ajoutant une minuterie comme le montre l'exemple.

Y at-il une raison spécifique que vous voulez que le DOM à être mis à jour après chaque cycle? Il serait beaucoup plus rapide si vous créez tous les éléments dans un élément javascript, et ajouter ce un élément au DOM lorsque le cycle est terminé. 

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);
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top