2

我无法理解为什么下面的代码不像我预期的那样运行。我希望它：

  1. 在黄色边框中显示 aaa，
  2. 然后在短时间内阻止 UI（for循环）
  3. 然后在粉红色边框中显示“无”

当我用 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";
4

2 回答 2

2

.setTimeout() 将它放在最后的队列中。它在边框设置为黄色后运行，因此它显示为粉红色。

于 2013-09-17T00:29:02.013 回答
1

您的代码执行 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循环）

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

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

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

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

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

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

于 2013-09-17T00:46:57.190 回答