To see the problem in action, see this jsbin. Clicking on the button triggers the buttonHandler(), which looks like this:

function buttonHandler() {
  var elm = document.getElementById("progress");
  elm.innerHTML = "thinking";
  longPrimeCalc();
}

You would expect that this code changes the text of the div to "thinking", and then runs longPrimeCalc(), an arithmetic function that takes a few seconds to plete. However, this is not what happens. Instead, "longPrimeCalc" pletes first, and then the text is updated to "thinking" after it's done running, as if the order of the two lines of code were reversed.

It appears that the browser does not run "innerHTML" code synchronously, but instead creates a new thread for it that executes at its own leisure.

My questions:

1. What is happening under the hood that is leading to this behavior?
2. How can I get the browser to behave the way I would expect, that is, force it to update the "innerHTML" before it executes "longPrimeCalc()"?

I tested this in the latest version of chrome.

To see the problem in action, see this jsbin. Clicking on the button triggers the buttonHandler(), which looks like this:

function buttonHandler() {
  var elm = document.getElementById("progress");
  elm.innerHTML = "thinking";
  longPrimeCalc();
}

You would expect that this code changes the text of the div to "thinking", and then runs longPrimeCalc(), an arithmetic function that takes a few seconds to plete. However, this is not what happens. Instead, "longPrimeCalc" pletes first, and then the text is updated to "thinking" after it's done running, as if the order of the two lines of code were reversed.

It appears that the browser does not run "innerHTML" code synchronously, but instead creates a new thread for it that executes at its own leisure.

My questions:

1. What is happening under the hood that is leading to this behavior?
2. How can I get the browser to behave the way I would expect, that is, force it to update the "innerHTML" before it executes "longPrimeCalc()"?

I tested this in the latest version of chrome.

• javascript

• setTimeout(longPrimeCalc, 50); will solve the issue. And: " but instead creates a new thread" Nope, js has only one active thread. – gdoron Commented May 27, 2013 at 15:49
• 0 instead of 50 is also valid (and more self-explaining). – Grzegorz Rożniecki Commented May 27, 2013 at 15:51
• 2 @Xaerxess yes but in this particular case Firefox takes advantage of that and continues to defer the re-flow! – Pointy Commented May 27, 2013 at 16:03
• 3 @Pointy Oops, that seems like few possible bugs in my codebase :( – Grzegorz Rożniecki Commented May 27, 2013 at 16:06
• 5 Should be noted that none of this really has anything to do with .innerHTML. You'll get the same behavior for any DOM manipulation where you'd expect a redraw. – user1106925 Commented May 27, 2013 at 17:25

2 Answers 2

Your surmise is incorrect. The .innerHTML update does plete synchronously (and the browser most definitely does not create a new thread). The browser simply does not bother to update the window until your code is finished. If you were to interrogate the DOM in some way that required the view to be updated, then the browser would have no choice.

For example, right after you set the innerHTML, add this line:

var sz = elm.clientHeight; // whoops that's not it; hold on ...

edit — I might figure out a way to trick the browser, or it might be impossible; it's certainly true that launching your long putation in a separate event loop will make it work:

setTimeout(longPrimeCalc, 10); // not 0, at least not with Firefox!

A good lesson here is that browsers try hard not to do pointless re-flows of the page layout. If your code had gone off on a prime number vacation and then e back and updated the innerHTML again, the browser would have saved some pointless work. Even if it's not painting an updated layout, browsers still have to figure out what's happened to the DOM in order to provide consistent answers when things like element sizes and positions are interrogated.

1. I think the way it works is that the currently running code pletes first, then all the page updates are done. In this case, calling longPrimeCalc causes more code to be executed, and only when it is done does the page update change.

2. To fix this you have to have the currently running code terminate, then start the calculation in another context. You can do that with setTimeout. I'm not sure if there's any other way besides that.

Here is a jsfiddle showing the behavior. You don't have to pass a callback to longPrimeCalc, you just have to create another function which does what you want with the return value. Essentially you want to defer the calculation to another "thread" of execution. Writing the code this way makes it obvious what you're doing (Updated again to make it potentially nicer):

function defer(f, callback) {
  var proc = function() {
    result = f();
    if (callback) {
      callback(result);
    }
  }
  setTimeout(proc, 50);
}

function buttonHandler() {
  var elm = document.getElementById("progress");
  elm.innerHTML = "thinking...";
  defer(longPrimeCalc, function (isPrime) {
    if (isPrime) {
      elm.innerHTML = "It was a prime!";
    }
    else {
      elm.innerHTML = "It was not a prime =(";
    }
  });
}