Quickly solve the problem of timely rendering of pages after dynamically changing the attributes of dom elements by js

Today, a progress bar loading process is implemented, and the dom structure is actually two divs

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

By controlling the wide width attribute of the inner div, you can achieve the effect of moving forward on the progress bar.

My progress bar shows the progress of downloading files. If you simply implement a total of 100 files, downloading one will be 1%, and downloading 20 will reach 20%. So the code is implemented as follows:

var fileCount=();
 (function(i,obj){
   ........//Download file  ("percent_bar").=i/fileCount*100 + "%";//Change the width of the inner div })

But you will see files downloaded one by one, but the progress has not moved. This is because js logic will be executed first, and page rendering will be performed only after js execution is finished, so you cannot see a normal progress bar.

How can I make js logic execute and wait for first-class page rendering?

var i=0;
var fileCount=();
var loop = function () {
 if(i>fileCount)//Exit the loopreturn;
  .....//Download file  i++;
  ("percent_bar").=i/fileCount*100+"%";
　//Next loop = (loop, 0);7 } = (loop, 0);

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

The above article quickly solves the problem of timely rendering of pages after dynamically changing the attributes of dom elements by js is all the content I share with you. I hope you can give you a reference and I hope you can support me more.