一个包含30亿次迭代的循环表现奇怪。

Question

一个包含30亿次迭代的循环表现奇怪。

14

当我试图回答这个问题时，我遇到了一个奇怪的行为（与他的不同：他的是由于迭代次数太少，我的是由于迭代次数太多）：

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!';
};

由于其中有 30 亿次的迭代，循环需要几秒钟来执行。

一旦按钮被点击，我期望的是：

出现“等待......”
由于循环，进程会稍微冻结一下
出现“Dary！”

实际发生的情况：

由于循环，进程会稍微冻结一下
“等待... Dary！”一起出现

任何想法为什么会发生这种行为？

请自行检查：fiddle。

- sp00m

1

在所有浏览器中都是这样的行为吗？如果设置一个小的超时，它会正确地工作。 - Huangism

我看到了那个小提琴，真的很奇怪... 我以为“循环”是一个非常简单的过程！ - The Dark Knight

1

此外，浏览器会优化对DOM/CSS的更改，以便仅在必要时执行它们（以避免多个连续的回流）。 - Felix Kling

1

我的猜测是textContent的设置是异步的，而当浏览器尝试显示文本时，3亿次循环会冻结浏览器，因此在完成之前您将看不到任何更新，但是在完成时文本会再次设置。这里是带有超时的相同fiddle http://jsfiddle.net/2MrD8/2/ - Huangism

5个回答

10

Javascript几乎是单线程的。如果你在运行代码，页面将会无响应并且在你的代码完成前不会更新。(请注意这是具体实现而定，但目前所有浏览器都是如此做的。)

- Dark Falcon

有没有办法强制页面按照所描述的消息进行更新？ - cssyphus

1

按照其他答案中提到的方法插入延迟。 - Dark Falcon

2

Dark Falcon和Simon Belanger已提供了原因的解释；本篇文章讨论了另一种解决方案。但是，相对于30亿次迭代来说，这种解决方案绝对不适用，因为它速度太慢了。

根据这篇由用户Cocco发布在Stack Overflow的帖子，使用requestAnimationFrame比setTimeout更有效。因此，以下是如何使用requestAnimationFrame：

jsFiddle示例

$(document).ready(function() {
    var W = window,
        D = W.document,
        i = 0,
        x = 0,
        output = D.getElementById('output');

    function b() {
        if (x == 0) {
            output.textContent = 'wait for it...';
            x++;
        }
        i++;
        if (i < 300) {
            //if (i > 20) output.textContent = i;
            requestAnimationFrame(b);
        } else {
            D.body.style.cursor = 'default';
            output.textContent += ' dary!';
        }
    }

    function start() {
        console.log(D)
        D.body.style.cursor = 'wait';
        b();
    }
    D.getElementById('go').onclick = start;
}); //END $(document).ready()

- cssyphus

1

您的代码正在按照预期执行。问题在于，浏览器不会在javascript完成之前显示对文档的更改。超时可以通过将代码执行分为两个单独的事件来解决此问题。以下代码将显示您所期望的结果。

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

在使用超时解决方案时，您还需要小心，因为执行不再是同步的。

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);
    output.textContent += ' epic';
};

如果您运行此版本，您会注意到“epic”在“dary”之前。

- Philip Tinney

0

我所能看到的唯一解释是浏览器在执行 JavaScript 后刷新视图？作为证明，以下代码的效果如预期：

var output = document.getElementById('output');
document.getElementById('go').onclick = function () {
    output.textContent += 'wait for it...';
    window.setTimeout(count, 100);
};

function count() {
    for (var i = 0; i < 3000000000; i++) {
        var unused = i; // don't really care
    }
    output.textContent += ' dary!';
}

- Julien

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Belanger · Accepted Answer

原因在于该函数作为整体是同步执行的。在您将输出设置为等待它...时，它进入了长时间运行的循环并独占线程。如果您将其余部分包装在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);
};

请注意，处理过程中仍会冻结用户界面。

编辑：在Chrome浏览器中使用0作为延迟值可以正常工作，但是最新的Firefox和IE 10浏览器不行。将该值更改为10在这两种情况下都可以正常工作。