Почему событие HTML DOM не влияет сразу на тот же элемент DOM?

Question

Я пишу код для изменения значения элемента Button при выполнении события click.

Но пока он не закончится, это не повлияет на значение элемента кнопки.

Я приложил скрипку пример , которая даст вам хорошее представление о том, о чем я говорю.

function myFunction() {
 document.getElementById("demo").innerHTML = "Hello World";
 alert('hi')
}

Даже элемент кнопки innerHTML изменился до предупреждения, это не влияет на пользовательский интерфейс.

Как я могу выполнить, прежде чем предупреждение будет выполнено, мне нужно изменить текст кнопки?

Спасибо.

Answer 1

Ближайшим к потокам в JS является функция settimeout, это не совсем нормально, но вот как бы это выглядело, если бы вы ее использовали

 function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
  setTimeout(function(){
      alert('hi')
  },1000)
}

Answer 2

Для правильного объяснения того, почему это происходит, см. этот ответ здесь .

TL; DR см. Ответ Хосе .

Вот как вы можете быстро это исправить

setTimeout(_=>alert('hi'))

Answer 3

Это потому, что выполнение потока Javascript останавливается, пока вы не нажмете кнопку подтверждения в предупреждении. Вы скажете: а почему? если инструкция изменения HTML была выполнена раньше. Что ж, хотя код Javascript был выполнен, браузер все еще не вносил изменения в DOM.