javascript - 为什么 HTML DOM 事件不会立即影响同一个 DOM 元素？

Question

我正在编写代码以在执行单击事件时更改 Button 元素值。

但直到它完成它不会影响按钮元素的值。

我附上了小提琴的例子，它会让你很好地理解我在说什么。

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

即使按钮元素 innerHTML 在 alert 之前发生了变化，也不会影响 UI。

我该如何完成，在执行警报之前我需要更改按钮文本？

谢谢。

score 1 · Accepted Answer

这是因为 Javascript 线程执行停止，直到您单击警报中的确认按钮。你会说：但为什么呢？如果之前执行了 HTML 更改指令。好吧，虽然 Javascript 代码被执行了，但浏览器仍然没有对 DOM 进行更改。

score 1 · Accepted Answer

有关它发生原因的正确解释，请参见此处的答案。

这是您可以快速解决此问题的方法

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

score 1 · Accepted Answer

JS 中最接近线程的是 settimeout 函数，这是不行的，但是如果你使用它会是什么样子

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

3 回答 3