Question

I want to force a repaint during a Javascript loop. For example:

var s = document.getElementById("foo");
for (var i = 0; i < 10000; i++)
    s.innerText = i + " times";

That updates at the end, but I would like to observe each intermediate step. The common response to this problem is to use setTimeout, however, there are three reasons that is unacceptable:

• There are other buttons/links etc on the page, and it is important that none of these can be clicked while the loop operates.
• At the end of the loop I want to display a popup, if the timeout fires then standard popup blockers will hide it, as it is no longer initiated by the user.
• If the user clicks while the loop is running, I want that click to be buffered until the loop completes, not fired half way through the loop.

Is there a way to force the browser to repaint?

Answer 1

I’m afraid this is your only solution though, since the non-repaintable-in-the-middle is something important as a predicate for speed gains in rendering of browsers.

Perhaps could you manage a buffer-me flag in those click events you don’t want to fire? Or better said a dont-buffer-me flag…

I hope it helped, best regards.