我是一名尝试学习 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);
代码不应该按顺序运行吗？谁能解释一下这里的行为？谢谢
最佳答案
想象一下这个阻塞的 js 代码:
for(let i = 0; i < 1000; i++)
document.body.innerHTML += "something";
如果每次 DOM 更改时浏览器都直接重新渲染，则更改 DOM 将花费很长时间并且会对性能产生很大影响。因此，大多数浏览器只是在 javascript 停止执行后才重新呈现。 alert 实际上是真正阻止 javascript 的唯一方法，因此它是唯一可以真正注意到此行为的情况。
When I introduced a delay as shown below it worked fine
因为 JS 停止执行一次，浏览器有时间重新渲染。
不同的浏览器在这里表现不同，因为它实际上是not specified .
关于javascript - 弹出窗口出现在其前一条语句执行之前，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51803543/