javascript - 在 requestAnimationFrame() 中重置“时间戳”的值？

Question

我目前正在制作一个幻灯片，它会在 10 秒后翻转幻灯片，并使用 requestAnimationFrame 来做到这一点。

但是，我在时间戳方面遇到了一些问题。我想跟踪时间戳值（这没问题），当它达到超过 10000（10 秒）的值时，将时间戳重置为 0 并继续。但是，当我尝试更改时间戳的值时，什么也没有发生。假设它是一个常量？每次调用时都将变量设置为 performance.now() 的行为也不像我预期的那样。

想知道这个问题的最佳解决方法是什么，也许使用 performance.now()？谢谢！

标签： javascripttimestamprequestanimationframe

Answer 1

当循环开始时，存储对它开始时间的引用。然后更新该变量，而不是尝试修改时间戳。

let start = null;
let loop = (timestamp) => {
  if (!start) {
    start = timestamp;
  };
  const progress = timestamp - start;
  if (progress > 10000) {
    console.log('loop', start);
    start = timestamp;
  }
  requestAnimationFrame(loop)
};
requestAnimationFrame(loop);