文章出處
文章列表
今天實現一個進度條加載過程，dom結構其實就是兩個div
1 <div class="pbar"> 2 <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div> 3 </div>
控制里層div的寬width屬性，就能實現進度條往前走的效果。
我的進度條是顯示下載文件的進度，簡單實現一共100個文件的話，下載一個就1%，下載了20個就走到20%。于是代碼實現如下：
1 var fileCount=fileList.length(); 2 fileList.foreach(function(i,obj){ 3 ........//下載文件 4 document.getElementById("percent_bar").style.width=i/fileCount*100 + "%";//改變內層div的寬度 5 })
但是你會看到文件一個個下載下來，但進度始終沒有動一動。這是因為js邏輯會優先執行，而頁面渲染會在js執行結束后才進行的，這樣就無法看到一個正常的進度條了。
怎么能讓js邏輯執行等一等頁面渲染呢?
1 var i=0; 2 var fileCount=fileList.length(); 3 var loop = function () {
if(i>fileCount)//退出循環
return; 4 .....//下載文件 5 i++; 6 document.getElementById("percent_bar").style.width=i/fileCount*100+"%";
//下一步循環
that.loopId = window.setTimeout(loop, 0);
7 } 8 that.loopId = window.setTimeout(loop, 0);
通過settimeout函數可以實現進度條動態效果了。
文章列表
全站熱搜
留言列表
