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中调试代码时，我看到肯定弹出后给出肯定。它命中代码“document.write（”这是一个牛排！“）;”和HTML页面显示“这是一个牛排！”，然后代码命中提示弹出窗口。

对我来说很困惑的是，当我用铬合金运行它时，“这是一块牛排！”只会在提示弹出后显示。似乎document.write只在javascript代码执行后生效？或者HTML开始在javascript之后呈现页面？我用谷歌搜索，但找不到类似的问题或答案。

Answer 1

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

以下脚本会阻止红色，直到您点击确定（至少在Chrome上，在Firefox上我很惊讶它看起来没有用：D）

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

＆＃13;

// 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);
}

＆＃13;

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

＆＃13;

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

1 个答案: