javascript - 3,000,000,000 次迭代循环行为异常

Question

在尝试回答 this 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 it...出现
2. 由于循环，进程有点卡顿
3. dary! 出现

实际发生了什么:

1. 由于循环，进程有点卡顿
2. wait for it...dary! 一起出现

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

自己查:fiddle .

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。

编辑:在 Chrome 中使用 0 作为延迟值有效，但在最新的 Firefox 和 IE 10 中无效。将值更改为 10 在这两种情况下都有效。