快速解决js动态改变dom元素属性后页面及时渲染的问题


Posted in Javascript onJuly 06, 2016

今天实现一个进度条加载过程,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函数可以实现进度条动态效果了。

以上这篇快速解决js动态改变dom元素属性后页面及时渲染的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
jQuery 3.0十大新特性
Jul 06 #Javascript
Javascript 基础---Ajax入门必看
Jul 06 #Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 #Javascript
jQuery事件委托之Safari
Jul 05 #Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 #Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 #Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 #Javascript
You might like
PHP文件系统管理(实例讲解)
2017/09/19 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
JavaScript 学习笔记(十一)
2010/01/19 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
python查询mysql中文乱码问题
2014/11/09 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
python中的yield from语法快速学习
2020/11/06 Python
Django url 路由匹配过程详解
2021/01/22 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
采购部部门职责
2013/12/15 职场文书
旷课检讨书范文
2014/10/30 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
普通员工辞职信范文
2015/05/12 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers