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函数中，所以我认为它可以同步运行，但说实话我不知道。帮助我的佩佩加编码同伴

Answer 1

当您调用updateProduct(productID) { this.setState((prevState) => ({ content:{ ...prevState.content }, products:{ ...prevState.products, [productID] : { ...prevState.products[productID], editable : !prevState.editable } } })) }时，它会调用异步函数并返回一个Promise。浏览器不等待响应继续呈现页面。

您可以创建cardData() 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调用返回一个值。如果不是，则可以设置超时或使用旧的appendChild调用

脚本标记无法同步呈现

2 个答案: