Informationen zum Problem in Aktion finden Sie unterdieser jsbin. Ein Klick auf die Schaltfläche löst die ausbuttonHandler(), was so aussieht:

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

Sie würden erwarten, dass dieser Code den Text des div in "Denken" ändert und dann ausgeführt wirdlongPrimeCalc()Dies ist eine arithmetische Funktion, die einige Sekunden in Anspruch nimmt. Dies ist jedoch nicht der Fall. Stattdessen wird "longPrimeCalc" zuerst abgeschlossen, und der Text wird nach Abschluss der Ausführung in "Denken" aktualisiert, als ob die Reihenfolge der beiden Codezeilen umgekehrt wäre.

Es scheint, dass der Browser nicht synchron "innerHTML" -Code ausführt, sondern stattdessen einen neuen Thread für ihn erstellt, der nach eigenem Ermessen ausgeführt wird.

Meine Fragen:

Was passiert unter der Haube, das zu diesem Verhalten führt?Wie kann ich den Browser dazu bringen, sich so zu verhalten, wie ich es erwarten würde, dh ihn zu zwingen, "innerHTML" zu aktualisieren, bevor es ausgeführt wird? "longPrimeCalc()"?

Ich habe dies in der neuesten Version von Chrome getestet.