settimeout javascript无法正常运行？

Question

我正在使用以下代码，以便向用户显示一些文本。

基本上我需要显示的是：

1 2 3 4

但是这段代码显示

1 4

这是代码：

    <script>
    function myFunction() {
    setTimeout(function() {
      document.getElementById('p').innerHTML = "1";
    }, 2000);

    setTimeout(function() {
      document.getElementById('p').innerHTML = "2";
    }, 4000);

    setTimeout(function() {
      document.getElementById('p').innerHTML = "3";
    }, 4000);

    setTimeout(function() {
      document.getElementById('p').innerHTML = "4";
    }, 4000);
    };
    </script>


<p id="p"></p>

<input onclick="myFunction()" type="submit" />

有谁知道为什么会这样？

提前致谢。

Answer 1

因为

setTimeout(function() {
  document.getElementById('p').innerHTML = "2";
}, 4000);

setTimeout(function() {
  document.getElementById('p').innerHTML = "3";
}, 4000);

setTimeout(function() {
  document.getElementById('p').innerHTML = "4";
}, 4000);
};

正在编辑同一元素，因此您只能看到上一次操作的结果：4

---

setTimeout()方法将在指定的毫秒数后调用一个函数或对一个表达式求值。 并且在您的情况下，时间是相同的，因此所有操作都在同一时间执行。

设置它们之间的间隔。

Answer 2

setTimeout不会从上一个setTimeout的结束算起时间，而是从setTimeout语句执行的时间算起。

因此，所有setTimeout与报表2 ， 3和4都开始等待4秒几乎在同一时间。

Answer 3

您正在快速连续地编辑相同的元素，如果您为setTimeout设置了不同的值，例如1000、2000、3000、4000，您会看到文本从1更改为2到3更改为4，间隔为1s（大约）每次更改。