快速解决js动态改变dom元素属性后页面及时渲染的问题
作者:jingxian 时间:2024-05-02 16:17:39
今天实现一个进度条加载过程,dom结构其实就是两个div
<div class="pbar">
<div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div>
</div>
控制里层div的宽width属性,就能实现进度条往前走的效果。
我的进度条是显示下载文件的进度,简单实现一共100个文件的话,下载一个就1%,下载了20个就走到20%。于是代码实现如下:
var fileCount=fileList.length();
fileList.foreach(function(i,obj){
........//下载文件
document.getElementById("percent_bar").style.width=i/fileCount*100 + "%";//改变内层div的宽度
})
但是你会看到文件一个个下载下来,但进度始终没有动一动。这是因为js逻辑会优先执行,而页面渲染会在js执行结束后才进行的,这样就无法看到一个正常的进度条了。
怎么能让js逻辑执行等一等页面渲染呢?
var i=0;
var fileCount=fileList.length();
var loop = function () {
if(i>fileCount)//退出循环
return;
.....//下载文件
i++;
document.getElementById("percent_bar").style.width=i/fileCount*100+"%";
//下一步循环 that.loopId = window.setTimeout(loop, 0);7 }
that.loopId = window.setTimeout(loop, 0);
通过settimeout函数可以实现进度条动态效果了。
标签:dom,元素,渲染
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
详解Python中datetime库的使用
2021-03-31 20:14:13
python字典get()方法用法分析
2023-04-01 23:50:41
Python字典和列表性能之间的比较
2022-08-08 12:49:58
![](https://img.aspxhome.com/file/2023/0/128630_0s.png)
python 解决mysql where in 对列表(list,,array)问题
2024-01-27 06:34:23
使用matplotlib创建Gif动图的实现
2021-03-09 11:32:02
![](https://img.aspxhome.com/file/2023/2/121652_0s.gif)
Mysql动态更新数据库脚本的示例讲解
2024-01-23 11:22:49
Python3模拟登录操作实例分析
2022-01-18 13:36:26
![](https://img.aspxhome.com/file/2023/8/115498_0s.jpg)
什么是网站灵魂?
2007-09-08 08:25:00
一个表单焦点效果函数
2008-01-19 10:59:00
go语言编程之select信道处理示例详解
2024-04-26 17:16:14
python Tensor和Array对比分析
2023-08-27 04:37:02
教你用python3根据关键词爬取百度百科的内容
2023-12-28 16:30:24
Python import与from import使用和区别解读
2021-06-22 08:51:02
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2022-01-30 21:24:56
ThinkPHP 3.2 版本升级了哪些内容
2023-09-05 04:22:04
JS 实现请求调度器
2024-04-22 22:37:24
![](https://img.aspxhome.com/file/2023/8/135608_0s.png)
人脸识别具体案例(李智恩)
2023-05-18 22:32:55
![](https://img.aspxhome.com/file/2023/2/123552_0s.png)
PHP Class&Object -- PHP 自排序二叉树的深入解析
2024-06-05 09:48:33
pytorch交叉熵损失函数的weight参数的使用
2021-02-27 15:52:31
![](https://img.aspxhome.com/file/2023/3/101703_0s.jpg)
python argparse的使用步骤(全网最全)
2023-06-14 01:13:45
![](https://img.aspxhome.com/file/2023/9/59289_0s.png)