Javascript- 脚本执行顺序

Question

我已阅读问题，但找不到与我的问题相关的答案。我有以下代码：

<script>
        var pText = "";
        var firstText = document.getElementById("firstText");
        pText += 'appear first';
        firstText.innerHTML = pText;
</script>
<script>
        var qText = "";
        var secondText = document.getElementById("secondText");
        qText += 'appear next';
        secondText.innerHTML = qText;
</script>

<div class="card text-center">
  <div class="card-header">
    <h1>title</h1>
  </div>
  <div class="card-body">
    <span id="firstText"></span>
    <span id="secondText"></span>
  </div>
</div>

由于脚本的顺序，我期望的结果是：

appear first
appear next

但是顺序是：

appear next
appear first

我已经研究了 defer 和 sync，但我不太确定如何使用这些属性。任何帮助将不胜感激！

Answer 1

我不是 100% 确定 async/defer 与脚本标签一起使用时会做什么，所以如果您确实想这样做，我会把它留给其他人。

如果您要寻找的只是控制这些脚本块（或者您的实际脚本，如果这些只是理论上的）的执行顺序，您可以将每个脚本块放在一个函数中，将事件监听器附加到document.DOMContentLoaded 并在 window 加载后尽快让处理程序运行他们。然后你可以在事件处理程序中调用，例如，appearFirst(); appearNext();，你就会知道它会如何运行。

Javascript- 脚本执行顺序

Javascript- Order of script execution

html

javascript

load

download