300,000,000次迭代循环表现得非常奇怪

Question

在尝试回答这个问题时,我遇到了一个奇怪的行为(这是不一样的:他的迭代太少,我的太多了):

HTML:

<button id="go">it will be legend...</button>
<div id="output"></div>

JS:

var output = document.getElementById('output');
document.getElementById('go').onclick = function() {
    output.textContent += 'wait for it...';
    for (var i=0; i<3000000000; i++) {
        var unused = i; // don't really care
    }
    output.textContent += ' dary!';
};

循环需要几秒钟才能执行,因为它有3,000,000,000次迭代.

单击按钮后,我的预期:

1. wait for it... 出现
2. 由于循环,该过程冻结了一点
3. dary! 出现

实际发生了什么:

1. 由于循环,该过程冻结了一点
2. wait for it... dary!一起出现

知道为什么会出现这种行为吗？

自己检查:小提琴.

Answer 1

原因是整个功能同步执行.当您将输出设置为时wait for it...,它进入长时间运行的循环并占用线程.如果将其余部分包装在一起timeout,则第一个文本将显示为正常.

var output = document.getElementById('output');
document.getElementById('go').onclick = function() {
    output.textContent += 'wait for it...';
    window.setTimeout(function() {
    for (var i=0; i<3000000000; i++) {
        var unused = i; // don't really care
    }
    output.textContent += ' dary!';
    }, 0);
};

请注意,它仍将在处理时冻结UI.

编辑:使用0Chrome作为延迟值工作,但它不在最新的Firefox和IE 10中.10在两种情况下都将值更改为有效.

Answer 2

Javascript几乎是单线程的.如果您正在运行代码,则该页面无响应,并且在您的代码完成之前不会更新.(请注意,这是特定于实现的,但这是所有浏览器今天都这样做的.)