计算1个周期的持续时间

Question

我正在研究RGBGenerator，我想计算1个周期需要多少秒; Forumla：

ticks it needs for 1 cycle * speed / 1000 = seconds
ticks it needs for 1 cycle * speed / 1000 / 60 = minutes

但它计算错了;例： 如果需要1791个刻度并且速度为10ms / tick，则需要17.9秒（18秒）。当我开始倒计时时，需要18秒才能完成一个周期。

计算所需的滴答数：

var r = settings.startR, g = settings.startG, b = settings.startB, range = settings.range, states = [], tick = 0;
states.push(Math.max(Math.abs((r - range)), Math.abs((g - range)), Math.abs((b- range))));
for(var i = 0; i < 6; i++) {
    states.push((states[i]+1) + range);
}

计算秒/分钟：

$( "#cycleSeconds" ).html("1 cycle = " + ((states[6]*speed/1000) >= 60 ? Math.round((states[6]*speed/1000/60)) + " minutes" : Math.round((states[6]*speed/1000)) + " seconds"));

Live demo（您需要将速度输入设置在左侧并按开始）

有人知道为什么计算错了，以及如何修复它？

Answer 1

为了更准确地使用绘图，请使用window.requestAnimationFrame而不是setTimeout。

你实际上是这样做的：

1. 涂料
2. 等一段时间
3. 转到2

你可能没有计算花在绘画上的时间和时间。其他计算。这就是为什么持续时间超过tick * count。

以防万一：Performance.now()将帮助您非常准确地衡量执行时间。