JavaScript 调用函数进行 DOM 更新的机制是怎样的?

例如写一个 sleep() 函数用来延时, 阻塞代码执行, 比如调用下面的代码:

function sleep(millisecond) {    var start = new Date();    var end = start.getTime() + millisecond;    while(true) {        
if (new Date().getTime() > end) {            break;
        }
    }
}function generateText() {    var i = 0;    for (i; i < 10; i++) {
        (function(){            var n = i;            document.body.appendChild(document.createTextNode(n));
            sleep(100);
        })();
    }
}
generateText();

想当然的认为, 上面一段代码, 每 100ms 在 <BODY> 中加入一个内容为索引值的文本节点, 但是实际上, 整个内容会在 1s 后一次性全部加载在浏览器中, 达不到想要的每 100ms 加载一次, 为什么会这样呢?
(setTimeout 是将任务加载到队列里, 而不是阻塞程序的执行, 所以达不到想要的效果, setInterval 不能满足想达到的效果)

Smart猫小萌

浏览 611回答 1