使用javascript更新进度条

Question

我想在功能运行时更新html中的进度条。我有什么方法可以做到这一点吗？

function animateProgressBar() {
  var numIteration = 100;

  for (var i = 1; i <= numIteration; i++) {
    //do some calculations
    width = (i/numIteration)*100;
    htmlElement.style.width = width + '%'; 
  }
}

Answer 1

问题是你的代码是阻塞的。因此页面未呈现，状态栏不会更改。您可以递归使用setTimeout：

function animateProgressBar(numIteration,index=1) {
    width = (index/numIteration)*100;
    htmlElement.style.width = width + '%'; 
    if(index<numIteration) setTimeout(animateProgressBar,100,numIteration,index+1);
} 

像这样开始：

animateProgressBar(100); // from 1 to 100

请注意，参数中的 index = 1 是ES6，所以只需在现代浏览器上使用它......