10

I have a for loop which iterates more than 10,000 times in a javascript code. The for loop creates and adds < div > tags into a box in the current page DOM. 

for(i = 0; i < data.length; i++)
{
    tmpContainer += '<div> '+data[i]+' </div>';
    if(i % 50 == 0) { /* some delay function */ }
}
containerObj.innerHTML = tmpContainer;

i want to put a delay after every 50 < div > tags so what will be the code at the place of

/* some delay function */

because its taking too much time to load all 10,000 < div > tags. i want to update the box in chunks of 50 < div > tags.

thanks in advance.

Improve this question
0

5 Answers 5

Reset to default
16

There's a handy trick in these situations: use a setTimeout with 0 milliseconds. This will cause your JavaScript to yield to the browser (so it can perform its rendering, respond to user input and so on), but without forcing it to wait a certain amount of time:

for (i=0;i<data.length;i++) {
    tmpContainer += '<div> '+data[i]+' </div>';
    if (i % 50 == 0 || i == data.length - 1) {
        (function (html) { // Create closure to preserve value of tmpContainer
            setTimeout(function () {
                // Add to document using html, rather than tmpContainer

            }, 0); // 0 milliseconds
        })(tmpContainer);

        tmpContainer = ""; // "flush" the buffer
    }
}

Note: T.J. Crowder correctly mentions below that the above code will create unnecessary functions in each iteration of the loop (one to set up the closure, and another as an argument to setTimeout). This is unlikely to be an issue, but if you wish, you can check out his alternative which only creates the closure function once.

A word of warning: even though the above code will provide a more pleasant rendering experience, having 10000 tags on a page is not advisable. Every other DOM manipulation will be slower after this because there are many more elements to traverse through, and a much more expensive reflow calculation for any changes to layout.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

That'll work, but two comments: 1. It unnecessarily creates a new function every time you reach 50 divs. That's 199 unnecessary functions. Probably okay, but still, avoidable. 2. It's more efficient to build HTML up in an array of strings, and then use a.join("") to create one big string when you're done, than to use string concatenation to build up the HTML.
@T.J. you're right about both those points, but I didn't bother for the sake of simplicity: 1. Function creation is rarely a performance issue, especially when your bottleneck is the DOM, 2. string concatenation is only a problem on IE, and often faster in other browsers, but even for IE, since I'm resetting tmpContainer to an empty string, the strings never become large ;)
@Box9: Just saw it: document.write?!?! That flatly will not work. appendChild, etc., is fine.
@T.J. well it will work, but it'll just overwrite the page you had, so it probably won't work as expected ;) I hope it was clear that it merely indicates the use of the variable html rather than tmpContainer.
@Box9: Interesting interpretation of "work". ;-) I'd remove it as completely misleading and just go with a comment "use html here to create elements". By the way, I was wrong before, it's ~398 completely unnecessary functions (you're recreating the thing that creates the closures, which there's even less need for than the other). Also, unless it happens that data.length % 50 == 0, this will either fail to output the last 1-49 or at least require duplicated code to do so. Instead: pastie.org/1533736 This is all by way of giving a good answer, not giving you a hard time.
|
3

You could use the window.setTimeout function to delay the execution of some code:

if(i % 50 == 0) {
    window.setTimeout(function() {
        // this will execute 1 second later
    }, 1000);
}

But your javascript will continue to execute. It won't stop.

Improve this answer

Comments

1

I'd break out the code creating the divs into a function, and then schedule execution of that function periodically via setTimeout, like this:

function createThousands(data) {
    var index;

    index = 0;
    doAChunk();

    function doAChunk() {
        var counter;

        for (counter = 50; counter > 0; --counter) {
            // Are we done?
            if (index >= data.length) {
                // Yup
                return;
            }

            // ...create a div...

            // Move to the next
            ++index;
        }

        // Schedule the next pass
        setTimeout(doAChunk, 0); // 0 = defer to the browser but come back ASAP
    }
}

This uses a single closure, doAChunk to do the work. That closure is eligible for garbage collection once its work is done. (More: Closures are not complicated)

Live example

Improve this answer

2 Comments

@fehergeri: My problem? Huh?
@fehergeri: Oh, I see, you meant his problem. I was dealing with the issue of not doing interim updates; reflow is something else entirely.
1

it takes much time because the reflows. you should create a document fragment and then adding the brats.

When does reflow happen in a DOM environment?

Javascript Performance - Dom Reflow - Google Article

sleeping will not solve your problem

on the other hand, you creating a string containing the innerhtml and the add to innerhtml. the string stuff really dont needs a big performance, but when you execute the .innerhtml command, it starts a process, which parse your string and creating elements and appending them. you cant interrupt or add a delay.

the innerhtml process cannot be sleeped or interrupted.

you need to generate the elements one by one, and after 50 elemnts added, create a settimeout delay.

var frag = document.createDocumentFragment();

function addelements() {

   var e;
   for(i=0;i<50;++i) {
       e = document.createElement('div');
       frag.appendChild(e);
   }
   dest.appendChild(frag);
   window.setTimeout(addelements,1000);

}
Improve this answer

Comments

-1

Here is the real trick to put a delay in javascript without hanging the browser. You need to use a ajax function with synchronous method which will call a php page and in that php page you can use the sleep() php function ! http://www.hklabs.org/articles/put-delay-in-javascript

Improve this answer

1 Comment

Note that link-only answers are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.