Update DOM parameter in JavaScript

Question

I run a loop inside the click event handler by doing the following:

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

The problem is that the DOM is not updated until the loop completes. Starting a loop for 100 iterations takes too much time, I would like to give a result every time I calculate it.

How can I get the DOM to update?

Answer 1

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

If not, use setTimeout after each calculation to split the column and allow the browser to use the time for rendering.