在requestAnimationFrame之前调用的performance.now()-performance.nno

Question

所以我有一个简单的函数：

var start = function(){
lastFrame = performance.now();

requestAnimationFrame((t)=>{interval(t)});

}

我的间隔函数(只是为了测试目的，我已经阻塞了每个rAF戳的值)

function interval(t){
console.log (t);
console.log(lastFrame);
}

现在我已经阅读了下面对另一个问题的回答，但我只是无法理解这个人回答的几个部分。

传入requestAnimationFrame()回调的时间戳是动画帧开始的时间。在同一帧期间调用的多个回调都接收相同的时间戳因此，如果performance.now()在参数值之前返回一个时间，那将是非常奇怪的，但在那之后就不奇怪了

"如果performance.now()返回参数值之前的时间，那将非常奇怪"？

为什么这会很奇怪？我以为Javascript是一种解释语言？此时：

lastFrame = performance.now();

浏览器现在甚至不关心下一行：

requestAnimationFrame((t)=>{interval(t)});

当然，如果在为requestAnimationFrame提供回调之前调用performance.now()，那么lastFrame的时间应该小于传递到requestAnimationFrame的t？

在这个人的回复中，他列出了一个请求动画帧的6步过程。但是，他将performance.now()调用列为最后一步。

当浏览器在animationFrame请求之前对其进行解释时，它怎么可能是最后一步？

Answer 1

您指向_y的答案谈到在回调rAF时调用performance.now()。您在外部称之为，因此，它当然会被设置为之前的日期。

---

您的代码简化了

let t0 = performance.now(); // This is called now
requestAnimationFrame(t1=>func(t1)); // this will be called at next screen refresh
// (somewhere between 0 and 17 ms later)

---

另一个答案的点_y：

let f1 = time => {
window.calledTime = time;
while(wait(a_few_seconds)){}
}
let f2 = time => {
time === window.calledTime; // true !
performance.now() - time; // approximately a_few_seconds
}
requestAnimationFrame(f1);
requestAnimationFrame(f2);

---

因此，简单地说，在您的情况下，lastFrame设置在t之前是正常的，因为它在之前被称为way(rAF是异步的)
另一个答案谈到了链接的rAF调用，这些调用都堆叠在同一个函数调用中，因此无论上次回调执行的时间如何，它们都将共享相同的时间戳参数。

---

现在，如果您需要的是一个原始时间戳，那么使用performance.now()作为回退是非常安全的，因为它与作为参数发送到回调的内容类似，只是它反映了监视器发送最后一个V-Sync脉冲的时间，因此对于同一帧的所有回调都是通用的

const loop = time => { 
if(!time) time = performance.now(); // we called it out of a rAF routine
...
requestAnimationFrame(loop)
}
loop();

然而，如果你使用rAF循环，大多数时候，这是因为你需要你的例程与屏幕同步。因此，在开始循环之前等待下一次屏幕刷新更有意义，否则，您将在一帧内执行两次此例程。

const loop = time =>{
...
}
requestAnimationFrame(loop); // call it directly through rAF

Answer 2

我也遇到过这种情况。看起来像一个bug，因为它太不直观了。

我使用Date.now()作为elapsedTime的初始值。

var elapsedTime = 0;
var startTime = Date.now();
var lastTime = null;
requestAnimationFrame(update);
function update(currentTime) {
if (lastTime) {
elapsedTime += currentTime - lastTime;
} else {
elapsedTime = Date.now() - startTime;
}
// Compute the next value in the animation.
var value = computeValue(elapsedTime);
// Store the timestamp representing the animation frame.
lastTime = currentTime;
}