Question

我在理解为什么下面的代码没有按照我的预期行事时遇到了问题。我希望它能够：

以黄色边框显示aaa，
然后阻止UI短时间（for循环）
然后在粉色边框中显示“无”

当我用setTimeout（aaa，100）替换setTimeout（aaa，0）时，它每次都正常工作但不应该setTimeout（aaa，0）将我的aaa函数放入队列并允许浏览器重绘之前aa运行？我希望它每次都遵循步骤1-3，但显然我错过了一些东西。它似乎每隔一秒运行一次。

代码在下面，我在http://jsfiddle.net/dDJ8L/

HTML

<div id="aaa" style="border: 1px solid green">aaa</div>

的Javascript

div = document.getElementById("aaa");

div.style.border = "1px solid red";


function aaa() {

    for (var i = 0; i < 1000000; i++) {
        div.innerHTML = i;
    }
    div.innerHTML = "nothing";
    div.style.border = "1px solid pink";
}

div.style.border = "1px solid blue";
setTimeout(aaa, 0);
div.style.border = "1px solid yellow";

Answer 1

.setTimeout（）将其放在队列中。它在边框设置为黄色后运行，因此呈现粉红色。

Answer 2

您的代码执行1，然后是2，然后执行3.让我们一步一步地完成它。

1。以黄色边框显示aaa

div.style.border = "1px solid red";
div.style.border = "1px solid blue";//overwrites red
div.style.border = "1px solid yellow";//overwrites blue

最后一个定义优先于此。它会使div具有黄色边框。 html中的默认文本是“aaa”。

2。然后短时间阻止UI（for loop）

setTimeout(aaa, 0);
function aaa() {
 for (var i = 0; i < 1000000; i++) {
    div.innerHTML = i;
 }
 ...
}

当0用于setTimeout时，它将使用浏览器允许的最小间隔。在大多数情况下，您可以假设这将是4-10毫秒。实际上，那里的代码应该是setTimeout(aaa, 10);。无论哪种方式，“短时间”在这里真的很短，所以你没有看到超时的暂停。此外，超时将导致函数调用异步发生而不是顺序发生。这意味着其余的代码将在函数aaa执行之前执行。超过1,000,000次迭代的for循环实际上非常快（因为在第一次循环之后没有变化，一些像V8这样的引擎实际上会理想地优化循环的其余部分。）

3。然后在粉色边框中显示“无”

div.innerHTML = "nothing"; div.style.border = "1px solid pink";

此代码位于函数aaa的末尾，并显示最终结果，粉红色边框显示“无”。

这是整个代码的小提琴：jsFiddle Demo

我不明白javascript中的setTimeout（fn，0）是如何工作的

2 个答案: