Para ver el problema en acción, veaeste jsbin. Al hacer clic en el botón se activa labuttonHandler(), que se parece a esto:

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

Usted esperaría que este código cambie el texto del div a "pensar" y luego se ejecutelongPrimeCalc(), una función aritmética que tarda unos segundos en completarse. Sin embargo, esto no es lo que sucede. En su lugar, "longPrimeCalc" se completa primero, y luego el texto se actualiza a "pensar" después de que se ejecuta, como si se invirtiera el orden de las dos líneas de código.

Parece que el navegador no ejecuta el código "innerHTML" de forma sincrónica, sino que crea un nuevo hilo para él que se ejecuta a su propio ritmo.

Mis preguntas:

¿Qué está pasando bajo el capó que está llevando a este comportamiento?¿Cómo puedo hacer que el navegador se comporte de la manera que yo esperaba, es decir, forzarlo a actualizar el "innerHTML" antes de que se ejecute?longPrimeCalc()"?

He probado esto en la última versión de Chrome.