CODEWITHSUNDEEP
javascripthtmlcssdom
BA
BA

Reputation:

How can I force the browser to redraw while my script is doing some heavy processing?

I am using the innerHTML property to modify a DIV dynamically, to report on a process that takes a few seconds to finish. The problem is that on Firefox the page is not actually re-rendered to reflect that change until after the script has finished. This makes the app feel sluggish. Is there a way to make sure that changes to the HTML show up immediately, even if more scripts are running?

Upvotes: 9

Views: 5139

Answers (2)

Breton
Breton

Reputation: 15582

The browser is single threaded. While the script is running, the browser can't do anything else. If you want to do something like a progress meter, you have to use setTimeout(), or setInterval(), and break your task down into smaller chunks that get run on an interval. This leaves gaps in between the script runs, giving control back to the browser, where the browser can redraw.

Upvotes: 14

edsoverflow
edsoverflow

Reputation: 591

Try interrupting your script periodically. You should be able to use 

setTimeout(nextFunction, 0);

to provide the necessary interruption without a long delay, where nextFunction is the function that continues with your lengthy processing.

Upvotes: 7

Related Questions