没有正确添加断点的秒表

Question

我有一个主秒表,每个步骤有4个迷你秒表.完成时间后,这里有一个定时器应该如何显示的示例:

MAIN:  00 : 14 : 57
-------------------
MINI1: 00 : 04 . 17
MINI2: 00 : 06 . 40
MINI3: 00 : 02 . 54
MINI4: 00 : 01 . 46

迷你定时器应该与主定时器相加,就像在这种情况下一样.使用我当前的计时器,它似乎总是.02毫秒关闭,所以00 : 14 . 55在这种情况下它们会加起来而不是00 : 14 . 57.

这是我当前计时器的JSFiddle.我认为问题最有可能出现在stopwatch.js文件中,但我不确定为什么会这样,因为我Date.now()用来计算已经过了多少时间.这是一个stopwatch.js文件,它是单个秒表的代码:

class Stopwatch {
  constructor (opts) {
    this.isOn = false;
    this.time = 0;
    this.elem = opts.elem;
  }

  start () {
    this.offset = Date.now();
    this.interval = setInterval(() => this._update(), 10);
    this.isOn = true;
  }

  stop () {
    clearInterval(this.interval);
    this.offset = null;
    this.interval = null;
    this.isOn = false;
  }

  reset () {
    this.time = 0;
    this._render();
  }

  _update () {
    this.time += this._getTimePassed();
    this._render();
  }

  _getTimePassed () {
    const now = Date.now();
    const timePassed = now - this.offset;
    this.offset = now;
    return timePassed;
  }

  _timeFormatter (milliseconds) {
    const padZero = (time) => `0${time}`.slice(-2);

    const minutes = padZero(milliseconds / 60000 | 0);
    const seconds = padZero((milliseconds / 1000 | 0) % 60);
    const centiseconds = padZero((milliseconds / 10 | 0) % 100);

    return `${minutes} : ${seconds} . ${centiseconds}`;
  }

  _render () {
    this.elem.textContent = this._timeFormatter(this.time);
  }
}

我所拥有的一切完全在里面的jsfiddle我在这上面也提到要点,如果这是更易于阅读.任何指导将不胜感激.

Answer 1

你说的是20ms的延迟,这可能是由许多事情引起的.

• 正如Flynn1179建议的那样,可能会在调用之间进行 Date.now()
• JavaScript的setInterval漂移!这是一个证明它的箱子.你不能指望在一个线程上运行的语言能够以每10ms的速度完美地计划任务,而你的_update方法就是这样.
• 您忽略了厘秒计数器中的0-9ms,这是在主计时器中计算的.这可能是最大的促成因素.例如,假设迷你秒A为15毫秒,迷你秒B为15毫秒.Miniwatch A显示'01',迷你B显示'01',但主表显示'03',因为30ms已经过去.

为了正确解决这个问题,我建议您重新设计您的解决方案,以便将所有秒表包装在一起StopwatchManager,这样可以立即渲染所有秒表,并通过添加迷你图片的时间来计算主表的总时间.您可能还希望考虑使用requestAnimationFrame渲染而不是setInterval.