Question

我是一位尝试学习JavaScript的Java开发人员。我有一个选择书下拉菜单，从中可以选择一本书。选择后，我将显示以下消息。 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”时，预期的行为是ID为displaySelectedBook的para标签应该在消失之前显示警报消息。但这反过来起作用。

当我如下图所示引入延迟时，它工作正常

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

代码不应该按顺序运行吗？有人可以在这里解释行为吗？谢谢

Answer 1

想象一下这段阻塞的js代码：

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

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

当我如下图所示引入延迟时，它工作正常

因为随后JS停止执行一秒钟，并且浏览器有一些时间可以重新渲染。

不同的浏览器在这里的行为有所不同，因为它实际上是not specified。

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

1 个答案: