JavaScript 调用函数进行 DOM 更新的机制是怎样的?
巴扎黑
巴扎黑 2017-04-11 13:11:35
[JavaScript讨论组]

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

巴扎黑
巴扎黑

全部回复(2)
PHPz

日经问题……
看这里:当我用js给元素添加className时,浏览器发生了什么?

简单说说你的例子:

  1. JavaScript脚本进程和DOM渲染进程是不一样的

  2. 一个页面只拥有一个进程,所以DOM渲染只能等待JavaScript进程运行完毕

  3. 你的sleep实际上阻塞了JavaScript进程,所以虽然你隔了100ms添加一个节点,但是网页只会在JavaScript运行完毕之后一次性加入。

  4. 要完成你的要求,只能用异步函数setTimeout或者setInterval。而且实现起来也不难,我不明白为什么你说达不到想要的效果。

高洛峰

你果然是想当然...同步、异步、阻塞、非阻塞的概念先弄清楚,js最起码的执行方式得知道吧?js强制阻塞页面会处于未响应的状态。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号