Javascript: How to put a simple delay between javascript code execution?

Question

I have a for loop that repeats over 10,000 times in javascript code. The for loop creates and adds a <div> to the field on the current DOM page.

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>, so what will be the code in place

 /* some delay function */ 

as it takes too long to load all 10,000 <div>. I want to update a field in pieces of 50 <div>.

early.

Answer 1

There is a convenient trick in these situations: use setTimeout with 0 milliseconds. This will cause your JavaScript to work in the browser (so that it can render it, respond to user input, etc.), but without making it wait a certain 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 : TJ Crowder correctly mentions below that the above code will create unnecessary functions at each iteration of the loop (one to configure closure, and the other as an argument to setTimeout ). This is unlikely to be a problem, but if you want, you can test your alternative , which only creates a close function once.

Warning: despite the fact that the above code will provide a more pleasant rendering, the presence of 10,000 tags on the page is impractical. After that, each other DOM manipulation will be slower, because there are many other elements to go through and a much more expensive calculation of payments for any changes in the layout.

Answer 2

You can 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 run. This will not stop.

Answer 3

I would snatch the code creating the div into a function, and then periodically schedule this function to be executed using setTimeout , for example:

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

A single closure, doAChunk , is used to accomplish this work. This closure has the right to collect garbage after its completion. (Read more: Closing is not difficult )

Real time example

Answer 4

it takes a lot of time because it overpays. you must create a fragment of the document and then add the brothers.

When does DOM overflow occur?

Javascript Performance - Dom Reflow - Google Article

sleep will not solve your problem

on the other hand, you create a line containing innerhtml and add to innerhtml. the string material does not really require much performance, but when you run the .innerhtml command, it starts a process that parses your string and creates the elements and adds them. You cannot interrupt or add a delay.

The innerhtml process cannot be sleep or interrupted.

you need to generate the elements one after the other, and after adding 50 elements, create an establishment 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); } 

Answer 5

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