我有一个主秒表与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中包含了所有东西,如果读起来更容易的话,在这个要旨中也是如此。如有任何指导,将不胜感激。
发布于 2016-07-12 19:59:31
你说的是20毫秒的延迟,这可能是由许多因素造成的。
Date.now()
的调用之间setInterval
漂移!这是用来证明这一点的垃圾桶。对于在单个线程上运行的语言来说,您不可能期望每10‘t精确地安排任务一次,而您的_update
方法正是这样要求的。为了正确地解决这个问题,我建议重新设计您的解决方案,以便将所有秒表封装在一个StopwatchManager
中,它同时呈现所有秒表,并通过添加迷你表的时间来计算主表的总时间。您可能还需要研究如何使用requestAnimationFrame
来呈现而不是setInterval
。
发布于 2016-07-09 17:09:38
你停止一个计时器,在下一行,开始下一个计时器。您的问题部分在于,时间在这两个方法调用之间传递。
而且,您的“停止”方法甚至不使用当前时间,它只是追溯地从上次更新时停止它,它不会执行最终的_update
。
如果您真的希望它精确地加起来,那么在您的updateMiniTimers
方法中使用updateMiniTimers
,并将它传递给两个调用,以确保它们在同一时间点停止/启动,并在stop
调用之后执行最终呈现。
一般而言,在方法范围内:
method() {
var a = Date.now();
var b = Date.now();
}
A和b绝对不能保证是相同的,没有任何方法调用是瞬时的。
发布于 2016-07-18 08:06:30
我同意法拉兹关于可能的原因的看法。我还将检查各司的舍入错误。无论如何,如果您想使它更健壮和可扩展,您可以将您的时间点看作列表中不断扩展的元素。每当秒表启动时,您都会将列表中最后一个元素的索引记录为起始点,当结束时将最后一个元素的索引记录为终结点。这将允许您拥有精确的定时器层次结构。
https://stackoverflow.com/questions/38287667
复制相似问题