JavaScript del lado del cliente, la creación de varios elementos y mostrar cada ASAP

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

Pregunta

JavaScript del lado cliente código crea algunos elementos (aproximadamente 50-100) en un ciclo de: 

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

Hay algunos problemas con el renderizado del navegador. Por ejemplo, IE sólo se bloquea hasta que termina el ciclo y, a continuación, muestra todos los elementos a la vez. ¿Hay una manera de mostrar cada elemento por separado y creado inmediatamente después de appendChild()?

¿Fue útil?

Solución

insertar un retardo entre la adición de entradas sucesivas, 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);
    }
}

Kick apagado con: 

    insertEntry(myList);

donde miLista es la siguiente: 

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

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

Otros consejos

Esto es debido a la naturaleza de un solo subproceso de navegadores. Prestación no comenzará hasta que el hilo se vuelve inactivo. En este caso, es cuando el bucle se ha completado y la función de las salidas. La única manera de evitar esto es (más o menos) simular múltiples hilos utilizando temporizadores, así: 

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

La desventaja obvia es que esto llevará su bucle más tiempo en completarse porque está ajustada la prestación entre medio de cada iteración.

Me Wold hacerlo de esta manera el uso de jQuery en su lugar: 

<!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 hace tan rápido, que ni siquiera tendrá que preocuparse por mostrar a medida que se crean, pero puede que sea más suave mediante la adición de un temporizador, como se muestra en el ejemplo.

¿Hay alguna razón específica que desea el DOM que se actualiza después de cada ciclo? Sería mucho más rápido si crea todos los elementos en un solo elemento de JavaScript, y añadir un elemento al DOM cuando se termina el ciclo. 

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);
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top