时间戳

首页 > 解决方案 > 脚本标签未同步呈现

javascript - 脚本标签未同步呈现

问题描述

这是我正在使用的代码

<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();

我感觉这是因为 fetch 而发生的，但它在 async/await 函数中，所以我认为它会同步运行，但老实说我不知道​​。帮助我的 pepega 程序员伙伴

标签： javascripthtmlasynchronousfetchsynchronous

解决方案

当你调用cardData()它时，它会调用 async 函数并返回一个 Promise。浏览器不会等待响应继续呈现页面。

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

推荐阅读