使用javascript更新中的进度条

我想在函数运行时用html更新我的进度条。我有什么办法可以做到这一点吗

function animateProgressBar() {
  var numIteration = 100;

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

函数animateProgressBar（）{
var numIteration=100；
对于（var i=1；i而言，问题在于您的代码被阻塞。因此页面不会呈现，状态栏也不会更改。您可以递归使用setTimeout：

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

请注意，参数中的index=1是ES6，因此只需在现代浏览器上使用它即可…
您只是希望宽度从0%变为100%？或者有一些相关事件？这段代码根本不够。您应该提供所有相关代码（html、css、js）..或者创建一个演示/代码片段，让我们知道您的问题在哪里..以及为什么您在给OP编辑器的纯js消息中标记jquery？请不要在您确切知道OP需要什么之前编辑OP标记..特别是javascript和jquery标记可能是OP需要在javascript和jquery@MohitBhardwaj，在第e循环需要很长时间。我想在页面上提供有关进度的信息。但我不能暂停循环并更改html元素。@sheriffderek yep添加了一个sidenote@Jonasw，谢谢你的回答，问题是我不能在for循环中调用函数animateProgressBar。函数只有在循环结束时才会启动。js允许你一次只有一个线程？@pandaBaer完全正确。这就是为什么繁重的计算会因设置超时而中断，以便其他事情（用户界面呈现、用户交互）可以完成occur@pandaBaer你可以像上面那样把你繁重的计算放在一个循环中…@Jonasw我仍然不能更新进度条，我的进度条在for循环结束时开始工作。
animateProgressBar(100); // from 1 to 100