文章/答案/技术大牛

发布

问脚本标记不同步呈现
EN

Stack Overflow用户

提问于 2020-05-30 18:44:48

回答 2查看 215关注 0票数 0

这是im使用的代码。

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

我有一种感觉，这是因为提取，但它在一个异步/等待函数，所以我认为它会同步行动，但老实说，我不知道。帮助我的围棋友们

synchronous

javascript

html

asynchronous

fetch

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-05-30 18:49:08

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

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

票数 0

Stack Overflow用户

发布于 2020-05-30 18:54:21

我认为这可能就像将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调用返回一个值。如果没有，可以设置超时或使用旧的appendChild调用

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62107173

复制

相似问题

问脚本标记不同步呈现
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问脚本标记不同步呈现EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问脚本标记不同步呈现
EN