用Javascript创建一个精确的计时器，但我有时会得到一个负的间隔时间

Question

我不能使用大量的NPM库来获得精确的计时器，因为它依赖于我没有使用的节点...但是公式非常简单。这里有一个我正在使用的JSfiddle：

http://jsfiddle.net/zryNf/9/

setPercentageBar(page) {
    if (this.state.pagesById[page.id].active) {
      let pagesByIdCopy = Object.assign({}, this.state.pagesById);
      let pageCopy = pagesByIdCopy[page.id];

      let percent = (100.0 / parseFloat(page.durationTime)) / 10;
      pageCopy.percentage += percent;
      this.setState({pagesById: pagesByIdCopy});

      pageCopy.progressBarNextAt += this.progressBarTime;  // this.progressBarTime = 100

      console.log('start time');
      console.log(pageCopy.progressBarStart);
      console.log('next at');
      console.log(pageCopy.progressBarNextAt);
      console.log('drift');
      console.log((new Date().getTime() - pageCopy.progressBarStart) % 100);
      console.log('Date().getTime():');
      let currTime = new Date().getTime();
      console.log(currTime);
      console.log('interval time');
      console.log(pageCopy.progressBarNextAt - currTime);
      console.log('--------------------------------------------------------\n');

      if (pageCopy.percentage < 100) {
        pageCopy.progressBarTimer = setTimeout(() => this.setPercentageBar(pageCopy),
          pageCopy.progressBarNextAt - currTime);
      }
    }
  }

这不是我在React中做的代码，但它是完全相同的公式。

我除了使用100毫秒的延迟，因为我正在使用它来更新进度条，我需要进度条顺利推出。

我在记录开始时间、下一个时间、漂移和间隔时间，它总是开始得很好。但是在某个时候...间隔时间变成负数，我不知道为什么！然后从那时起，一切都开始混乱。我尝试了这个精确计时器的多种公式，最终每次都会发生。一旦间隔时间变成负数...他们都变成负数。

有人知道为什么吗？我能做些什么来修复它？

下面是一些示例日志

https://pastebin.com/Cpfpf1Gp

编辑：我最多有5个计时器在100ms每个

Answer 1

问题中的代码似乎采取了一些非常简单的方法，使其变得有点复杂。与其尝试用“漂移”计算来弥补这种复杂性，我们为什么不采取更简单的方法呢？

关键是要将这两件事分离开来：

1. 何时更新进度条

相反，我们只需要一个update（）函数，它可以在任何时候调用，并且总是做正确的事情。它的计算完全不取决于我们调用它的频率或时间。

此外，当您使用setTimeout（）或setInterval（）进行动画时，您可能会得到一些相当不稳定的结果。我们可以使用readestAnimationFrame（）来代替更流畅的动画。（它仍然不完美，但它比您使用计时器得到的更好。）

所以它可能看起来像这样：

function progressBar( duration ) {
    setValue( 0 );
    var startTime = +new Date;
    update();
    function update() {
        var elapsed = +new Date - startTime;
        if( elapsed > duration ) elapsed = duration;
        if( elapsed < duration ) requestAnimationFrame( update );
        setValue( elapsed / duration );
    }
    function setValue( fraction ) {
        var percent = Math.floor( fraction * 100 );
        document.getElementById('percent').innerHTML =
            percent + '%';
        document.getElementById('filler').style.width =
            fraction * 100 + '%';
    }
}

progressBar( 5000 );

#border {
    border-color: black;
    border-width: 1px;
    width: 100%;
    height: 20px;
}

#filler {
    background-color: green;
    width: 0;
    height: 100%;
}

<div id="border">
  <div id="filler">
      &nbsp;
  </div>
</div>
<div id="percent"><div>

Answer 2

不能保证setTimeout回调函数将在所需的时间执行。如果此时其他JavaScript代码正在运行，则必须首先运行到完成，然后才能处理事件队列中的下一个事件，计时器事件就是这样的事件。

所以你很可能会遇到以下情况：

• 在0ms：currTime为0，进度BarNextAt为100，然后调用setTimeout（进度BarNextAt，100）。一切都很完美。
• 1ms：事件队列中的下一个事件是正在发生的实际处理的回调
• 在220ms：回调结束，事件队列中的下一个事件是计时器（延迟），并且您的函数setPercentageBar第二次被调用
• 在221ms时：进度BarNextAt从100增加到200，这是不够的，因为我们已经过了那个时刻。您打印的间隔时间为-21。

甚至可以在计时器事件被处理之前以微任务的形式安排一些异步代码。例如，如果第二个项目符号中的处理有一些立即解决的promise，相应的那么回调函数仍将作为该任务的一部分执行，只有当所有这些都执行完毕时，计时器事件才会轮到它。

还要注意，非JS因素可能会影响某项任务所需的时间。如果机器负载过重，操作系统会重新分配资源，这可能会影响本来很轻的JavaScript任务。当相关窗口不在前台时，浏览器也倾向于延迟计时器事件的处理。还有其他原因。