requestAnimationFrame初始时间戳

Question

如何在requestAnimationFrame循环中获取增量计算的初始时间戳？

Here我读过

是[requestAnimationFrame（timestamp）] DOMHighResTimeStamp或高分辨率时间戳（与window.performance.now（）相同）

因此，我尝试执行以下操作：

let lastTimestamp = performance.now()
const loop = (timestamp) => {
  console.log("exec at " + timestamp + " with delta " + (timestamp - lastTimestamp))

  lastTimestamp = timestamp
  requestAnimationFrame(loop)
}

requestAnimationFrame(loop)

但是这会在第一帧有时处给出负值。我真的想避免这样做，因为这可能会破坏动画逻辑。出于性能原因，我也不想在持续调用的循环（如if (firstFrame) // do something differntly）中使用厚脸皮的解决方案。

Answer 1

只需将变量设置为null即可开始。第一次运行它将为空。检查一下。

var loops = 0

let lastTimestamp = null
const loop = (timestamp) => {
  if (!lastTimestamp) {
    console.log("First Time!");
  } else {
    console.log("exec at " + timestamp + " with delta " + (timestamp - lastTimestamp))    
  }
  lastTimestamp = timestamp
  loops++
  if (loops<10) {  // just so demo is not runaway loop
    requestAnimationFrame(loop)
  }
}

requestAnimationFrame(loop)