Quickly solve JS dynamic change DOM element attributes after the page timely rendering of the problem _javascript skills

Today to implement a progress bar loading process, the DOM structure is actually two Div

<div class= "Pbar" >
 <div class= "Ui-widget-header" id= "Percent_bar" style= "width:23%"; ></div>
 </div>

Control the width of the inner div of the property, you can achieve progress bar to go forward effect.

My progress bar is to show the progress of the download file, simple implementation of a total of 100 files, download one on 1%, download 20 went to 20%. So the code is implemented as follows:

var filecount=filelist.length ();
 Filelist.foreach (function (i,obj) {
   ...//download file
  document.getElementById ("Percent_bar"). style.width=i/ filecount*100 + "%";//change the width of the inner div
 )

But you'll see that the files are downloaded one at a times, but the progress is never moving. This is because the JS logic will be given priority, and page rendering will be done after JS execution, so that you can not see a normal progress bar.

How can I let JS logic to perform such a first-class page rendering it?

var i=0;
var filecount=filelist.length ();
var loop = function () {
 if (i>filecount)//exit loop return
;
  ...//download file
  i++;
  document.getElementById ("Percent_bar"). style.width=i/filecount*100+ "%";
Next loop  that.loopid = Window.settimeout (loop, 0), 7}
that.loopid = Window.settimeout (loop, 0);

The progress bar dynamic effect can be achieved through the settimeout function.

The above fast solution JS Dynamic change DOM element properties of the page in time to render the problem is small series to share all the content, hope to give you a reference, but also hope that we support cloud habitat community.