快捷導(dǎo)航

快速解決js動(dòng)態(tài)改變dom元素屬性后頁(yè)面及時(shí)渲染的問(wèn)題

更新時(shí)間：2016年07月06日 09:46:09 投稿：jingxian

下面小編就為大家?guī)?lái)一篇快速解決js動(dòng)態(tài)改變dom元素屬性后頁(yè)面及時(shí)渲染的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

今天實(shí)現(xiàn)一個(gè)進(jìn)度條加載過(guò)程，dom結(jié)構(gòu)其實(shí)就是兩個(gè)div

<div class="pbar">
 <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div>
 </div>

控制里層div的寬width屬性，就能實(shí)現(xiàn)進(jìn)度條往前走的效果。

我的進(jìn)度條是顯示下載文件的進(jìn)度，簡(jiǎn)單實(shí)現(xiàn)一共100個(gè)文件的話，下載一個(gè)就1%，下載了20個(gè)就走到20%。于是代碼實(shí)現(xiàn)如下：

var fileCount=fileList.length();
 fileList.foreach(function(i,obj){
   ........//下載文件
  document.getElementById("percent_bar").style.width=i/fileCount*100 + "%";//改變內(nèi)層div的寬度
 })

但是你會(huì)看到文件一個(gè)個(gè)下載下來(lái)，但進(jìn)度始終沒(méi)有動(dòng)一動(dòng)。這是因?yàn)閖s邏輯會(huì)優(yōu)先執(zhí)行，而頁(yè)面渲染會(huì)在js執(zhí)行結(jié)束后才進(jìn)行的，這樣就無(wú)法看到一個(gè)正常的進(jìn)度條了。

怎么能讓js邏輯執(zhí)行等一等頁(yè)面渲染呢?

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);

通過(guò)settimeout函數(shù)可以實(shí)現(xiàn)進(jìn)度條動(dòng)態(tài)效果了。

以上這篇快速解決js動(dòng)態(tài)改變dom元素屬性后頁(yè)面及時(shí)渲染的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript字母大小寫(xiě)轉(zhuǎn)換的4個(gè)函數(shù)詳解
這篇文章主要介紹了javascript字母大小寫(xiě)轉(zhuǎn)換的4個(gè)函數(shù)詳解,需要的朋友可以參考下
2014-05-05
用javascript實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了用javascript實(shí)現(xiàn)倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-02-02
js constructor的實(shí)際作用分析
大家討論下constructor的作用哈,需要的朋友可以參考下。從51js摘編而來(lái)。
2011-11-11
js對(duì)象屬性名駝峰式轉(zhuǎn)下劃線的實(shí)例代碼
這篇文章主要介紹了js對(duì)象屬性名駝峰式轉(zhuǎn)下劃線的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
JS正則子匹配實(shí)例分析
這篇文章主要介紹了JS正則子匹配用法,結(jié)合簡(jiǎn)單實(shí)例形式分析了js正則字匹配的概念、用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-12-12
JavaScript常用腳本匯總（一）
這篇文章主要介紹了JavaScript常用腳本匯總系列的第一篇，給大家分享的是jquery限制文本框只能輸入數(shù)字、封裝DOMContentLoaded事件、用原生JS對(duì)AJAX做簡(jiǎn)單封裝、跨域請(qǐng)求之JSONP、千分位格式化，有需要的小伙伴們參考下吧。
2015-03-03
JS實(shí)現(xiàn)跟隨鼠標(biāo)閃爍轉(zhuǎn)動(dòng)色塊的方法
這篇文章主要介紹了JS實(shí)現(xiàn)跟隨鼠標(biāo)閃爍轉(zhuǎn)動(dòng)色塊的方法,涉及javascript操作html元素及css樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
JavaScript常見(jiàn)的五種數(shù)組去重的方式
本文主要JavaScript常見(jiàn)的五種數(shù)組去重的方式進(jìn)行一一思路分析實(shí)例介紹，易于理解與學(xué)習(xí)，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
A標(biāo)簽觸發(fā)onclick事件而不跳轉(zhuǎn)的多種解決方法
一個(gè)標(biāo)簽僅僅是要觸發(fā)onclick行為，遇到了A標(biāo)簽觸發(fā)onclick事件時(shí)不執(zhí)行跳轉(zhuǎn)，下面與大家分享下四種解決方法，感興趣的朋友可以參考下哈
2013-06-06
asp javascript 實(shí)現(xiàn)關(guān)閉窗口時(shí)保存數(shù)據(jù)的辦法
asp javascript 實(shí)現(xiàn)關(guān)閉窗口時(shí)保存數(shù)據(jù)的辦法...
2007-11-11