Question

i want to perform a loop that writes strings in a div without overloading. I have got a list of names in an global array called names. The array is filled with about 2500 names. Now i want to write the names in a div using ajax. But when i want to loop the names, the script is kinda overloading and stops with an alert of the client. This is my loop:

for(var i = 0; i < names.length; i++){
   document.getElementById('div').innerHTML += names[i] + "<br/>";
}

I also tried to interlace the loop in smaller steps like 100 (because i thought like that the loop wouldnt overload). I also tried it with window.setTimeout("function(i)",0); with the param i, that steps 100 each time the function gets called, until i am at the length of the array names.

I know there is an easy way. But i can’t find that way….. would be pleased by getting help.

Thanks

Answer 1

try it this way:

    var content = '';

    for(var i = 0, n_length = names.length; i < n_length; i++) {
        content += names[i] + "<br/>";
    }

    document.getElementById('div').innerHTML += content;   // if the previous content should remain there

Please note that its faster, to store the abort value of a loop. Otherwise it would read the length-property of your array for each iteration of your loop (2500 x).

Also note that DOM-Manipulation is very verys slow, so its smart to reduce it to the lowest level possible. Better build your content separately and write it to the DOM once for all.