当ids不断增加时，cancelAnimationFrame是如何工作的？

Question

背景：

当使用setInterval或setTimeout时，我们会收到一个Id来取消/清除操作。

setInterval/setTimeout:

const timeoutId = setTimeout(() => {clearTimeout(timeoutId)}, 1000);
const intervalId = setInterval(() => {clearInterval(intervalId)}, 1000);

requestAnimationFrame:在使用raf时，对于每一步的迭代，我们重置rafId，而我们只在最新的rafId上调用cancelAnimationFrame？

let rafId;

function step(timestamp) {
  rafId = requestAnimationFrame(step);
  console.log(timestamp, rafId)
  if(timestamp >= 1000) {
    cancelAnimationFrame(rafId);
  }
}
rafId = requestAnimationFrame(step);

问题：如何知道在不断更新requestAnimationFrame时关闭对requestAnimationFrame的所有调用？

我猜想，cancelAnimationFrame是在frameId的基础上工作的，并关闭了它背后的一切。

如果是这样的话，它如何与多个requestAnimationFrames (因为他们将共享frameIds)一起工作？

Answer 1

的确，requestAnimationFrame返回的id不断增加1，但这并不重要。要保持请求“活动”，您需要在回调中重新请求它。让我们看看最后一次触发回调函数步骤时会发生什么：

function step(timestamp) {
  console.log("before " + rafId);
  rafId = requestAnimationFrame(step);
  console.log("after " + rafId);
  if (timestamp >= 1000) {
    cancelAnimationFrame(rafId);
  }
}
rafId = requestAnimationFrame(step);

如果您查看控制台中的最后两行，如下所示：

在50之前

后51

这意味着上次回调返回的id是50，现在我们请求一个获得id 51的新动画框架。这一次我们的if条件是真的，所以它取消了id 51的请求。在调用回调函数时，id 50的请求已经完成，因此不需要取消它。