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>

Answer 2

这是您想要实现的目标吗？您可以输入一个值，进度条将填满该值。未执行任何逻辑，因此请输入1到100之间的一个值，然后单击按钮。

function move() {
  var elem = document.getElementById("myBar");
  var perc = document.getElementById("percentage").value;
 
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= perc) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: green;
}

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

Answer 3

我有同样的问题。进度条正在报告计算密集型流程的进度。我发现，在更改进度值之后，并在执行过程中的下一个计算密集型步骤之前，插入500ms等待可以使视图平滑呈现。

代码段：

let count = 0;

for (const name of names) {
    count ++;

    this.progressLabel = name;
    this.progressValue = count / names.length;

    await sleep(500); // give a chance for the view to update

    await computeIntensiveStuff(name);
}

<ion-item>
    <ion-label position="stacked">
        Adding: {{progressLabel}}
    </ion-label>

    <ion-progress-bar [value]="progressValue">
    </ion-progress-bar>
</ion-item>

为什么进度条在更新时“闪烁”，我该如何解决？

3 个答案: