脚本标签不同步呈现

Question

这是我正在使用的代码

<body>

  <script type="text/javascript" src = "http://localhost:3000/common_assets/navbar.js"></script>

  <script type="text/javascript" src = "http://localhost:3000//index.js"></script>

  <h1>MonkaHmm...</h1>

</body>

两个脚本都呈现 html 并且它们都有效问题是第二个脚本总是最后呈现所以 MonkaHmm... 出现在页面中间。

这是第二个脚本标签中的代码

async function cardData(){
    var response = await fetch('http://localhost:3000/Board_Members.json');
    var carddata =  await response.json();

    carddata.forEach(function(membercard){
      var member_cards = document.createElement("div");
      var code = `
        <div class="member_cards card-4">
          <img class = "img_member" src="http://localhost:3000/IMAGES/jonipic.jpg">
          <div class="description">
            <h5>${membercard.name}</h5>
            <h5>${membercard.title}</h5>
            ${membercard.description}
          </div>

        </div>
        <link rel="stylesheet" type="text/css" href="http://localhost:3000/index.css">
`
      member_cards.innerHTML = code;
      document.body.appendChild(member_cards);
    });
}

cardData();

我觉得这是因为获取而发生的，但它在 async/await 函数中，所以我认为它会同步运行，但老实说我不知道。帮助我的 pepega 编码员

Answer 1

当您调用 cardData() 时，它会调用异步函数和 return 一个承诺。浏览器不等待响应继续呈现页面。

您可以创建 member_cards div 或占位符并在执行异步调用之前附加它，并在收到响应时将卡片添加到其中。

Answer 2

我认为这可以像将 appendNode 更改为 insertBefore

一样简单

member_cards.innerHTML = code;
document.body.appendChild(member_cards);

至此

member_cards.innerHTML = code;
let h1 = document.body.getElementsByTagName("H1")[0];
document.body.insertBefore(member_cards, h1);

您应该检查以确保 getElementsByTagName 调用 returns 一个值。如果没有，您可以设置超时或使用旧的 appendChild 调用

脚本标签不同步呈现

Script tag not rendering synchronously

html

javascript

asynchronous

synchronous

fetch