requestAnimationFrame 初始时间戳

Question

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

Here 我读过

It's [requestAnimationFrame(timestamp)] a DOMHighResTimeStamp or a high-resolution timestamp (the same you get with 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

只需将变量设置为空即可启动。第一次运行时它将为空。检查它。

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)

requestAnimationFrame 初始时间戳

requestAnimationFrame inital timestamp

javascript

requestanimationframe