javascript - 为什么 html 页面在 javascript 结束提示后呈现 document.write

Question

我是 JS 新手，下面有一个 javascript 代码片段:

<script type="text/javascript">
var eatSteak = confirm ("Do you eat steak?");
if (eatSteak) {
    document.write("Here's a Steak!");
}else{
    document.write("Here's a Tofo!");
}
var happy = prompt ("Are you happy?");
</script>

当我在 Chrome 中调试代码时，我看到在给出 yes 后会弹出确认窗口。它命中代码“document.write("Here's a Steak!");”，HTML页面显示“Here's a Steak!”，然后代码命中提示弹出。

令我感到非常困惑的是，当我在 chrome 中运行它时，“这是牛排!”仅在弹出提示后显示。好像document.write只有在javascript代码执行后才生效？或者 HTML 在 javascript 之后开始渲染页面？我用谷歌搜索但找不到类似的问题或答案。

Answer 1

这是单线程 JavaScript 模型的本质。当提示、警报等停止执行直到您做出决定时，您之前进行的任何 DOM 操作都会等到超出当前范围为止。这在不同的浏览器中可能会有所不同，但这取决于 DOM 操作的实现方式。

下面的脚本将阻止红色，直到您单击“确定”(至少在 Chrome 上，在 Firefox 上我很惊讶地发现它不起作用:D)

将 setColor 设置为绿色进行操作，然后使用 setTimeout 启动计时器以在下一个可能的时间显示警报。这将确保在显示警报之前设置绿色(在任何浏览器中)

// blocking call until it exits the function (at least, on Chrome, firefox seems to work)
function setColorToRed() {
  document.body.style.background = 'red';
  alert('Red will come after ok');
}

// none blocking call, works on all browsers
function setColorToGreen() {
  document.body.style.background = 'green';
  setTimeout(function() {
    alert('Green color should have been set');
  }, 0);
}

<button type="button" onclick="setColorToRed()">Blocking call red</button>
<button type="button" onclick="setColorToGreen()">None blocking call green</button>