javascript - 为什么这个进度条更新后是 'flickering'，我该如何解决？

Question

我有一个进度条，我想在用户单击某项时更新它。所以可以通过进度条来回前进。

目前，该栏似乎可以正常工作，但是该栏在闪烁，好像每秒都在加载该栏。例如，用户处于 70%，因此该条将填充到那里，然后清除，然后再次填充到 70%。但是，这种情况每秒发生数百次，因此该条似乎在闪烁。我也不知道我上面说的是否正确 - 我不知道它是否真的是填充然后清除，填充然后清除 x100。我所知道的就是它的样子，并且它给它带来了闪烁的效果。

我从这里得到代码:https://www.w3schools.com/howto/howto_js_progressbar.asp

我正在使用第一个没有标签的例子。

我已经对其进行了修改，以便它接受输入，并且栏基于此。

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，但问题仍然存在。

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

Answer 1

从广义上讲，如果您可以使用 CSS 来制作动画，那么您应该这样做。这允许浏览器微调控制，考虑移动设备计算能力、电池等。这还会自动包括诸如时间增量之类的内容，以确保无论如何动画都花费正确的时间。

function move() {
  var elem = document.getElementById("myBar");
  var perc = +document.getElementById("percentage").value;
  
  // optional: ensures the bar fills/empties at the same rate by varying the animation duration
  var previous = move.previous || 0;
  move.previous = perc;
  var change = Math.abs(perc - previous);
  elem.style.transitionDuration = (change*10)+"ms";
  
  elem.style.width = perc+"%";
}

#myProgress {
  width: 100%;
  background-color: grey;
  overflow: hidden;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: green;
  transition: width 500ms linear;
}

<div id="myProgress">
  <div id="myBar"></div>
</div>
<input type="number" min="0" max="100" id="percentage">
<button onclick="move()">Click Me</button>