javascript - 我不明白 setTimeout(fn,0) 在 javascript 中是如何工作的

Question

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

1. 在黄色边框中显示aaa，
2. 然后短时间阻塞 UI(for 循环)
3. 然后用粉色边框显示“nothing”

当我将 setTimeout(aaa,0) 替换为 setTimeout(aaa,100) 时，它每次都工作正常，但 setTimeout(aaa,0) 不应该将我的 aaa 函数放入队列并允许浏览器在之前进行重绘aa 运行了吗？我希望它每次都遵循步骤 1-3，但显然我遗漏了一些东西。它似乎仅在每两次运行时以这种方式运行。

代码在下面，我在 http://jsfiddle.net/dDJ8L/ 创建了 fiddle

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() 把它放在最后的队列中。它在边框设置为黄色后运行，因此显示为粉红色。