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

【问题标题】：Why the HTML DOM event doesn't affect immediately on the same DOM element?为什么 HTML DOM 事件不会立即影响同一个 DOM 元素？
【发布时间】：2019-02-12 15:57:36
【问题描述】：

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

但在完成之前它不会影响按钮元素的值。

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

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

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

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

谢谢。

【问题讨论】：

Is there a JavaScript alert that doesn't pause the script?的可能重复
您可以监听按钮值的变化，并在更改后触发警报，还是我错了？
@D.Schaller 不，这是一个更好的主意。但是 JS 出现这种行为的原因是什么？

标签： javascript html pure-js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

我不会称它为“线程执行”，因为这可能会让人们感到困惑 - JavaScript 没有真正的线程。
对，Javascript执行是单线程进程，但是线程就是线程，对吧？
线程通常是进程的组件，可以由调度程序独立管理。虽然您所说的在技术上是正确的，但在这种情况下可能会令人困惑，因为 JavaScript 没有底层线程的概念或访问权限。这可能无关紧要 - 但我只想说“JavaScript 执行暂停”或“JavaScript 引擎暂停”

【解决方案3】：

有关其发生原因的正确解释，请参阅this answer here。

TL；请参阅Josè's answer。

以下是快速解决此问题的方法

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

【讨论】：