Force DOM refresh in JavaScript

Question

I am running a loop within a click event handler doing the following:

run heavy computation (takes 1-3s)
call $("<li> + data + </li>").appendTo($("#results"))

The problem is, that the DOM is not refreshed until the loop has terminated. Running the loop for 100 iterations this takes too long, I would like to give a result every time I computed one.

How can I force the DOM to be refreshed?

http://tobyho.com/2011/11/03/delaying-repeatedly/ – airportyh Dec 23 '11 at 15:59 — airportyh, Dec 23 '11 at 15:59
You can also do `.appendto("#results")`, by the way. – pimvdb Dec 23 '11 at 16:03 — pimvdb, Dec 23 '11 at 16:03

score 4 · Accepted Answer · answered Dec 23 '11 at 16:01

4

If you are in a browser that supports it, workers are ideal for this situation.

If not, use setTimeout after each computation to break the callstack and allow the browser to use time on rendering.

answered Dec 23 '11 at 16:01

Martin Jespersen

25,743
8
56
68

Force DOM refresh in JavaScript

1 Answers1

Linked