Javascript 为什么这个进度条是'；闪烁'；何时更新以及如何修复？

我有一个进度条，每当用户点击某个东西时，我都要更新它。因此，可以通过进度条前后移动

当前，该条似乎可以工作，但该条正在闪烁，好像该条每秒都在加载。例如，用户是70%，所以该条将填充到那里，然后清除，然后再次填充到70%。然而，这种情况每秒发生数百次，所以它似乎在闪烁。我也不知道我上面说的是否正确——我不知道它是否真的是先充后清，先充后清x100。我所知道的就是它的样子，它给它一种闪烁的效果

我从这里得到了密码：

我用的是第一个eg，没有标签

我对它进行了修改，以便它接受输入，而条形图就是基于此

function move(i) {
var elem = document.getElementById("myBar"); 
var width = 1;
var id = setInterval(frame, 10);
function frame() {
  if (width >= 100) {
    clearInterval(id);
  } else {
    width= (i/lengthOfCurrentModule)*100; 
    elem.style.width = width + '%'; 
  }
}
}

在这个例子中，它是

width++;

所以我把它改成了我想要的

我试图摆脱

  if (width >= 100) {
    clearInterval(id);
  } 

bc我想它可能已经计算出超过100，但问题仍然存在

---

我不知道为什么它会那样闪烁。感谢您的帮助

这是您想要实现的吗？您可以输入一个值，progressbar将填充到该值。没有实现逻辑，因此请输入一个介于1和100之间的值，然后单击按钮

函数移动（）{
var elem=document.getElementById（“myBar”）；
var perc=document.getElementById（“百分比”）.value；
var宽度=1；
var id=设置间隔（第10帧）；
函数框架（）{
如果（宽度>=perc）{
清除间隔（id）；
}否则{
宽度++；
elem.style.width=宽度+'%'；
}
}
}

#我的进度{
宽度：100%；
背景颜色：灰色；
}
#我的酒吧{
宽度：1%；
高度：30px；
背景颜色：绿色；
}

单击我

广义地说，如果你可以使用CSS来制作动画，那么你应该这样做。这允许浏览器微调控制，考虑移动设备的计算能力、电池等因素。这还自动包括诸如增量计时之类的内容，以确保无论发生什么情况，动画都会占用正确的时间

函数移动（）{
var elem=document.getElementById（“myBar”）；
var perc=+document.getElementById（“百分比”）.value；
//可选：通过改变动画持续时间，确保栏以相同的速率填充/清空
var-previous=move.previous | | 0；
move.previous=perc；
var变化=数学绝对值（perc-上一个）；
elem.style.transitionDuration=（更改*10）+“ms”；
elem.style.width=perc+“%”；
}

#我的进度{
宽度：100%；
背景颜色：灰色；
溢出：隐藏；
}
#我的酒吧{
宽度：0%；
高度：30px；
背景颜色：绿色；
过渡段：宽度500ms线性；
}

单击我

我也遇到了同样的问题。进度条正在报告计算密集型进程的进度。我发现，在我更改进度值之后，在执行流程中的下一个计算密集型步骤之前，插入500毫秒的等待，可以使视图平滑渲染

代码段：

let count=0；
for（名称的常量名称）{
计数++；
this.progressLabel=名称；
this.progressValue=count/names.length；
等待睡眠（500）；//给视图一个更新的机会
等待computeIntensiveStuff（名称）；
}

添加：{progressLabel}

您可以添加一个代码段吗？运行代码段并键入99999999，然后单击“单击我”-乐趣：D