jQuery的`append`操作不能即时渲染-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery的`append`操作不能即时渲染

2016-03-26 11:40:28 2897 1

放在for循环内的append操作,本来应该是for循环执行一次就append一次,但是现在变成了整个for循环完成后才一次性append生成的元素到DOM中去。查了下说这个是因为重绘DOM耗费资源所以缓存掉了。想问下有办法解决么?
问题核心代码:

    for (var i = 0; i < testTimes; i++) {
        for (var j = 0; j < allFunc.length; j++) {
            var currentResult=$('.result').eq(j);
            var gapTime=test(times,allFunc[j]);
            var testTime=currentResult.find('span').length+1;
            if(!resultMatrix[testTime-1]){
                resultMatrix[testTime-1]=[];
            }
            console.log('1');
            var result="<span>第"+testTime+'次实验结果:耗时'+gapTime+'ms</span>';
            currentResult.append(result);//append不是一条一条加,而是全部结果出来后才加上去
            /* 这是后来改成原生appendChild的代码,但是依旧不起作用
            var result=document.createElement('span');
            result.innerHTML='第'+testTime+'次实验结果:耗时'+gapTime+'ms';
            currentResult.get(0).appendChild(result);
            */
            resultMatrix[testTime-1][j]=gapTime;
        };
    };

DEMO:
http://codepen.io/chitanda/full/NqeZag/点击预览

期望效果:
实验结果那里的数据每次计算完成后都即时更新,而不是全部计算完成后一次性更新上去。

PS
chrome下还有个很有趣的现象就是开发者工具的Elements面板里显示span已经加上去了,但是页面中没有任何反应。而IE和FF中则没有这种情况。不知道能否顺带解答下。
screenshot

取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:15:58

    JS在执行的过程中,UI渲染过程是不能够介入的
    只能等到所在的JS代码执行完毕,UI线程才开始执行页面渲染工作
    另外 append后 DOM结构树已经生成了,要显示出来需要UI渲染线程参与

    0 0
相关问答

1

回答

jquery解析xml怎样把结果存到list或者hashmap最后生成excel表格

2016-05-30 14:18:32 1696浏览量 回答数 1

1

回答

无法使用jQuery的append()添加同名<input>希望一起上传数组数据

2016-06-20 18:51:44 2015浏览量 回答数 1

1

回答

jquery怎么设置一个动态创建的 $('#').append('')中的ID?并利用它

2016-06-03 11:33:49 3603浏览量 回答数 1

1

回答

关于用jquery修改CSS的问题

2016-06-06 13:31:05 2478浏览量 回答数 1

1

回答

在新建的 jQuery 对象上使用 .on(),然后 append 到页面上后不起效果

2016-03-26 09:29:47 1727浏览量 回答数 1

1

回答

jQuery CSS效率

2016-03-24 08:34:35 1297浏览量 回答数 1

1

回答

jQuery CSS效率

2016-03-24 16:56:18 1256浏览量 回答数 1

1

回答

jquery如何设置一个动态创建的 $('#').append('')中的ID?

2016-03-23 09:49:08 2022浏览量 回答数 1

1

回答

jQuery append 添加标签后丢失css样式

2016-03-16 17:26:43 3902浏览量 回答数 1

1

回答

关于jquery操作数据,写入json类型的变量 报错

2016-03-05 11:29:13 2047浏览量 回答数 1
2709
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载