在内部循环中创建一个进度条-Javascript

我有一个带有for循环的项目，大约需要10分钟才能完成

这是一个html画布操作效果，只是个人使用，所以我不太在乎速度

然而，如果我能添加一个进度条，这样我就可以知道程序在循环中走了多远，这将是一件非常好的事情

问题是，在循环完成之前，我尝试过的任何东西似乎都不会更新

例如，考虑下面的代码：

var updateDiv = document.getElementById("update"); //Get a div to write progress to

for(i=0;i<10000;i++){ 

  //super crazy code
  updateDiv.innerHTML = i;

}

var updateDiv=document.getElementById（“更新”）//获取要写入进度的div
对于（i=0；i它没有改变的原因是因为没有页面重画。没有页面重画的原因是因为JavaScript在任务队列中工作

由于您的
for
循环目前正在使用操作系统100%的可用功率来最大化处理器（实际百分比的多少取决于浏览器和操作系统），因此在for循环完成之前，不允许运行其他任务-此时请求的页面重画将运行（同时更新图形）

您真正应该做的是使用此工作，而不是使用一个非常大的for循环。这将允许您为动画、监视和将来可能出现的任何其他挂钩提供各种其他挂钩。
避免同步执行此操作。这将锁定浏览器，不允许使用任何其他挂钩没有抽签周期可以发生，看起来没有什么变化

尝试将其分解为只执行一个步骤的函数，然后通过超时反复调用它


var updateDiv=document.getElementById（“更新”）；
var i=0；
var超时；
函数停止处理（）{
如果（超时）{
clearTimeout（超时）；
}
}
函数doStep（）{
//超级疯狂代码
updateDiv.innerHTML=i；
i++；
如果（i要显示进度，可以使用
setInterval（）
如下：

var interval = setInterval(function() {
  updateDiv.innerHTML = i;

  if (i == max)
    clearInterval(interval);

  i++;
}, 50);

代码：


var updateDiv=document.getElementById（“更新”）；//获取一个div以将进度写入
var i=0；
var max=100；
var interval=setInterval（函数（）{
updateDiv.innerHTML=i；
如果（i==最大值）
间隔时间；
i++；
}，50）；
在所有场景中使用requestAnimationFrame，使用递归setTimeout循环将大大改进。上次我检查的
requestAnimationFrame
比
setTimeout
慢。它旨在在使用
画布时提供稳定的动画帧。如果他不尝试绘制画布，则
setTimeout
可能是更好的选择。requestAnimationFrame通常用于画布，因为更改画布需要尽可能多的性能。但是，这并不意味着requestAnimationFrame仅用于画布。requestAnimationFrame将在重新绘制页面后运行，以便为进程提供无缝空间唱歌并锁定视图。setTimeout当然可以工作，但是，它实际上应该只用于一次调用，而不用于像这样的重复调用。使用setTimeout，50毫秒的步骤将始终落在重新绘制的页面上，并在工作完成时锁定UI。我让步。我重新阅读了问题，意识到他正在与我一起工作
canvas
因此，
requestAnimationFrame
是最好的选择。我还将指出，如果您只是处理数据，甚至更改
textContent
或
innerHTML
，那么
setTimeout
可能是更好的选择。@Wordica相信我，它正在做大量的工作。：D我已经在使用键入的数组和等等。它可以更快，但不会太快，而且10分钟跑得很好：）为什么有人删除我的评论？@zakaria acharki？如果你使用数组，那么你可以创建二维数组并更新索引…然后创建预加载程序查看数组的进度。@Travis J，感谢你的快速响应。是的，查看所有给定的答案，我明白我必须以异步方式运行代码，并且uestAnimationFrame是实现这一点最有效的方法。我注意到的一件事是，我在函数之后的所有代码（用于按顺序运行）现在在循环完成之前运行，但异步就是这样工作的。@YAHsaves-是的，引入任何类型的异步都意味着重构代码的其他部分，如果它是顺序的。在这种情况下，您可以使用承诺或回调，以使它看起来仍然是顺序的。