Idont了解javascript中的setTimeout（fn，0）如何工作

Question

我在理解为什么下面的代码不按我期望的那样工作时遇到了问题。 我希望它能：

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

当我将setTimeout（aaa，0）替换为setTimeout（aaa，100）时，每次都可以正常工作，但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（用于循环）

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

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

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

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

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

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