快速解决js动态改变dom元素属性后页面及时渲染的问题
作者：jingxian 发布时间：2024-05-02 16:17:39
标签：dom,元素,渲染
今天实现一个进度条加载过程，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函数可以实现进度条动态效果了。
0
投稿猜你喜欢
- Python单元测试unittest中提供了一下四种装饰器实现测试跳过和预期故障。（使用Python 2.7.13）请查考Python手册中
前言：1、gevent库可以轻松实现并发同步或异步编程。gevent中使用的主要模式是Greenlet，它是以C扩展模块的形式访问Pytho- 1. 前言随着互联网的发展和普及，网络安全问题越来越突出，网络在为用户提供越来越多服务的同时，也要面对各类越来越复杂的恶意攻击。SQL注入（
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- 主要原理：调整dicom的窗宽，使之各个像素点上的灰度值缩放至[0,255]范围内。使用到的python库：SimpleITK下面是一个将d
- 本文实例讲述了Python基于Matplotlib库简单绘制折线图的方法。分享给大家供大家参考，具体如下：Matplotlib画折线图，有一
- 本文实例讲述了php基于PDO实现功能强大的MYSQL封装类。分享给大家供大家参考，具体如下：class CPdo{ protected $
- 本文实例讲述了C#使用checkedListBox1控件链接数据库的方法。分享给大家供大家参考，具体如下：在数据库中创建三个表: 学生信息表
- 很多年以前，面对上古时代遗留的 HTML 发出的腐臭，我捂住鼻子唉声叹气。刚练熟 web 标准的我，恨不得寝其尸食其肉，把一切推翻重来。但经
- 事件对象asyncio.Event是基于threading.Event来实现的。事件可以一个信号触发多个协程同步工作，例子如下：import
- 实例一--爬取页面import requestsurl="https//itemjd.com/2646846.html"
- 实现流程从摄像头获取视频流，并转换为一帧一帧的图像，然后将图像信息传递给opencv这个工具库处理，返回灰度图像（就像你使用本地静态图片一样
- 1. 随机数np.random.random()是最常用的随机数生成函数，该函数生成的随机数随机均匀分布于[0, 1)区间。如果不提供参数，
- 对以下数据画图结果图不显示，修改过程如下df3 = {'chinese':109, 'American':8
- 一、数据库操作1、创建model表基本结构：#coding:Utf8from django.db import modelsclass us
- 昨天我的电影网站在生成内容静态页面的时候出了问题,提示下标越界,以前从来没有遇到过的,所以根本不知道是什么东西,于是就到处在网上找答案,但是
- 首先，看看本文所面向的应用场景：我们有一个数据集df，现在想统计数据中某一列每个元素的出现次数。这个在我们前面文章《如何画直方图》中已经介绍
- 在Python的标准库中，functools库中有很多对方法有操作的封装功能，partial Objects就是其中之一，他可以实现对方法参
- 由于项目需要，所以打算好好学习下bootstrap框架，之前了解一点，框架总体不难，但涉及到的东西还是很多，想要熟练掌握它，还是要多练练。一
- 使用了这么就pip命令，但是一直是简单使用，很多命令都是用了查，查了用，今天把常用的命令汇总一下，方便使用。命令：pip由上图可以看到 pi
