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()方法在指定的毫秒数后调用函数或计算表达式. 在你的情况下,时间是相同的,所以所有都在同一时间执行.

在它们之间设置一些间隔.