javascript - 如何保证两个setInterval持续时间相同

Question

我有一个带有 JS 动画的简单进度条。每 20ms，进度条的值增加 0.25。因此完成进度条需要 20*4*100ms = 8 秒，如下面的 JSFiddle 所示。

function updateProgress(currentValue, expectedValue){
    var inProgress = setInterval(function() {
      currentValue = currentValue + 0.25;
      $('#progress-bar').attr('value', currentValue);
      $('#progress-text').text(Math.round(currentValue));
      if (currentValue == expectedValue) clearInterval(inProgress);
    }, 20);
  }


updateProgress(0, 100);

<progress id="progress-bar" value="0" max="100"></progress>
<div><span id="progress-text">0</span>%</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

因此，如果我采用相同的代码并以 50% 而不是 0% 启动进度条，则需要 20*4*50ms = 4 秒才能完成进度条，如下面的 JSFiddle 所示。

function updateProgress(currentValue, expectedValue){
    var inProgress = setInterval(function() {
      currentValue = currentValue + 0.25;
      $('#progress-bar').attr('value', currentValue);
      $('#progress-text').text(Math.round(currentValue));
      if (currentValue == expectedValue) clearInterval(inProgress);
    }, 20);
  }


updateProgress(50, 100);

<progress id="progress-bar" value="50" max="100"></progress>
<div><span id="progress-text">50</span>%</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

我希望该函数始终具有相同的执行时间，而不管起始值如何。例如 0 到 -> 100 :4 秒，50 到 -> 100 也是 4 秒。

我尝试了这个，但它不起作用:

function updateProgress(currentValue, expectedValue){
  var interval = 4000 / (expectedValue - currentValue) / 4;

  var inProgress = setInterval(function() {
      currentValue = currentValue + 0.25;
      $('#progress-bar').attr('value', currentValue);
      $('#progress-text').text(Math.round(currentValue));
      if (currentValue == expectedValue) clearInterval(inProgress);
  }, interval);
}

updateProgress(50, 100);

Answer 1

我想我会使用 requestAnimationFrame 来实现此目的，这几乎就是它的设计目的。

function updateProgress(currentValue, expectedValue){
  var valueDelta = expectedValue - currentValue,
      startTime = performance.now();
      
  nextFrame(startTime);
  
  function nextFrame(time) {
      var value = Math.min(expectedValue, currentValue + valueDelta * (time - startTime) / 4000);
      
      setValue(value);
      
      if (value !== expectedValue) {
          requestAnimationFrame(nextFrame);
      }
  }
  
  function setValue(value) {
      $('#progress-bar').attr('value', value);
      $('#progress-text').text(Math.round(value));
  }
}

updateProgress(50, 100);

<progress id="progress-bar" value="50" max="100"></progress>
<div><span id="progress-text">50</span>%</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

无论您选择使用requestAnimationFrame还是setInterval，我认为关键是让您的动画基于当前时间，而不是假设计时器将被调用时间表。

当我运行你的原始代码时，它对我来说工作得很好。我的猜测是，问题是当间隔非常小时，计时器没有按计划调用，这将取决于平台。 setInterval 在最好的情况下也不是非常准确，但对于整个范围(0 到 100)，您将依赖于 10ms 计时器，该计时器太小了，可能会出现问题。