JavaScript 调用函数进行 DOM 更新的机制是怎样的?
本文介绍了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 不能满足想达到的效果)
解决方案
日经问题……
看这里：当我用js给元素添加className时，浏览器发生了什么？
简单说说你的例子：
JavaScript脚本进程和DOM渲染进程是不一样的
一个页面只拥有一个进程，所以DOM渲染只能等待JavaScript进程运行完毕
你的
sleep实际上阻塞了JavaScript进程，所以虽然你隔了100ms添加一个节点，但是网页只会在JavaScript运行完毕之后一次性加入。要完成你的要求，只能用异步函数
setTimeout或者setInterval。而且实现起来也不难，我不明白为什么你说达不到想要的效果。
这篇关于JavaScript 调用函数进行 DOM 更新的机制是怎样的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
