代码之家  ›  专栏  ›  技术社区  ›  Andy

在执行上一条语句之前出现弹出窗口

  •  2
  • Andy  · 技术社区  · 7 年前

    我是一个Java开发人员,正在学习javascript。我有一个选择书下拉列表,我可以从中选择一本书。选择时,我将显示以下消息。 You have selected <selectedBook> book!

    <!DOCTYPE html>
    <html>
    <head>
        <script>
    function selectBook() {
    
      var selectedBook = document.getElementById("books").value;
      if (selectedBook=='select') {
        document.getElementById("displaySelectedBook").style.display = "none";
        alert("Please select a valid book");
        return;
      } 
    document.getElementById("displaySelectedBook").style.display = "block";
    document.getElementById("displaySelectedBook").innerHTML = "You have selected " + selectedBook.bold() + " book!";
    
    }
    </script>
    </head>
    <body>
    <br>
    <table style="width:30%" border="1" align="center">
      <tr>
        <th>Select a Book</th>
        <td>
          <select id="books" onchange="selectBook()
          ">
              <option value="select">Select</option>
              <option value="Head First Java">Head First Java</option>
              <option value="Complete Reference">Complete Reference</option>
              <option value="Gang of four">Gang of four</option>
              <option value="Effective Java">Effective Java</option>
            </select>
        </td>
      </tr>
       <tr>
      <td colspan="2" align="center" style="display: none;">
         <button type="button" onclick="selectBook()">Select!</button>
      </td>
    
    
     </tr>
    
    </table>
    
    <p id="displaySelectedBook"/>
    
    </body>
    </html>
    

    问题是当我选择一本有效的书时,比如说 Complete Reference ,然后我选择“ select ,预期的行为是 displaySelectedBook 应在显示警报消息之前消失。但它的作用是相反的。

    当我引入如下所示的延迟时,效果很好

       setTimeout(function() {
          alert("Please select a valid book");
       }, 1);
    

    代码不应该按顺序运行吗?有人能解释一下这里的行为吗?谢谢

    1 回复  |  直到 7 年前
        1
  •  1
  •   Jonas Wilms    7 年前

    想象一下这个阻塞的js代码:

      for(let i = 0; i < 1000; i++)
        document.body.innerHTML += "something";
    

    如果每次DOM更改时浏览器都会直接重新呈现,那么更改DOM将花费很长时间,并且会对性能产生很大影响。因此,大多数浏览器只是在javascript停止执行后重新呈现。 alert 实际上,它是真正阻止javascript的唯一方法,因此它是唯一一个可以真正注意到这种行为的情况。

    当我引入如下所示的延迟时,效果很好

    因为JS停止执行一次,浏览器就有时间重新呈现。

    not specified .