快速解決js動態(tài)改變dom元素屬性后頁面及時渲染的問題
更新時間：2016年07月06日 09:46:09 投稿：jingxian
下面小編就為大家?guī)硪黄焖俳鉀Qjs動態(tài)改變dom元素屬性后頁面及時渲染的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
今天實現(xiàn)一個進度條加載過程，dom結(jié)構(gòu)其實就是兩個div
<div class="pbar"> <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div> </div>
控制里層div的寬width屬性，就能實現(xiàn)進度條往前走的效果。
我的進度條是顯示下載文件的進度，簡單實現(xiàn)一共100個文件的話，下載一個就1%，下載了20個就走到20%。于是代碼實現(xiàn)如下：
var fileCount=fileList.length();
fileList.foreach(function(i,obj){
........//下載文件
document.getElementById("percent_bar").style.width=i/fileCount*100 + "%";//改變內(nèi)層div的寬度
})
但是你會看到文件一個個下載下來，但進度始終沒有動一動。這是因為js邏輯會優(yōu)先執(zhí)行，而頁面渲染會在js執(zhí)行結(jié)束后才進行的，這樣就無法看到一個正常的進度條了。
怎么能讓js邏輯執(zhí)行等一等頁面渲染呢?
var i=0;
var fileCount=fileList.length();
var loop = function () {
if(i>fileCount)//退出循環(huán)
return;
.....//下載文件
i++;
document.getElementById("percent_bar").style.width=i/fileCount*100+"%";
//下一步循環(huán) that.loopId = window.setTimeout(loop, 0);7 }
that.loopId = window.setTimeout(loop, 0);
通過settimeout函數(shù)可以實現(xiàn)進度條動態(tài)效果了。
以上這篇快速解決js動態(tài)改變dom元素屬性后頁面及時渲染的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
javascript字母大小寫轉(zhuǎn)換的4個函數(shù)詳解
這篇文章主要介紹了javascript字母大小寫轉(zhuǎn)換的4個函數(shù)詳解,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細介紹了用javascript實現(xiàn)倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
大家討論下constructor的作用哈,需要的朋友可以參考下。從51js摘編而來。2011-11-11
這篇文章主要介紹了js對象屬性名駝峰式轉(zhuǎn)下劃線的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了JS正則子匹配用法,結(jié)合簡單實例形式分析了js正則字匹配的概念、用法與相關(guān)注意事項,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JavaScript常用腳本匯總系列的第一篇，給大家分享的是jquery限制文本框只能輸入數(shù)字、封裝DOMContentLoaded事件、用原生JS對AJAX做簡單封裝、跨域請求之JSONP、千分位格式化，有需要的小伙伴們參考下吧。2015-03-03
JS實現(xiàn)跟隨鼠標(biāo)閃爍轉(zhuǎn)動色塊的方法
這篇文章主要介紹了JS實現(xiàn)跟隨鼠標(biāo)閃爍轉(zhuǎn)動色塊的方法,涉及javascript操作html元素及css樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
本文主要JavaScript常見的五種數(shù)組去重的方式進行一一思路分析實例介紹，易于理解與學(xué)習(xí)，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
A標(biāo)簽觸發(fā)onclick事件而不跳轉(zhuǎn)的多種解決方法
一個標(biāo)簽僅僅是要觸發(fā)onclick行為，遇到了A標(biāo)簽觸發(fā)onclick事件時不執(zhí)行跳轉(zhuǎn)，下面與大家分享下四種解決方法，感興趣的朋友可以參考下哈2013-06-06
asp javascript 實現(xiàn)關(guān)閉窗口時保存數(shù)據(jù)的辦法
asp javascript 實現(xiàn)關(guān)閉窗口時保存數(shù)據(jù)的辦法...2007-11-11