为什么我需要cancelAnimationFrame()

Question

我不明白为什么API包括cancelAnimationFrame()，因为我可以通过设置continue变量来停止动画：

function draw(timestamp) {
  if (continue == true) { requestAnimationFrame(draw); }
}

所以问题是，在什么情况下我应该使用cancelAnimationFrame()?

Answer 1

首先，一个重要的参照点。A(日期)(候选人推荐)规范：http://www.w3.org/TR/animation-timing/#definitions

与每个文档相关联的是一个动画框架请求回调列表，它是一个元组列表。句柄是唯一标识列表中条目的整数^[long]。回调是一个FrameRequestCallback对象。最初，文档的动画框架请求回调列表为空。

另外，让我们记住，这些规范的目标受众是用户代理开发人员。正是在这些规范的实现中，用户代理为我们(应用程序开发人员)提供了一个API来与之进行接口。

请注意上面的every ；您可以在window或上下文中拥有多个文档。在浏览上下文中可以有多个上下文。

那么，这与的每个文档有什么关系呢？嗯，(推荐)规范引用了Process Model，它实际上将所有这些列表转储到一个空列表中，并对“保留”列表的结果执行回调调用算法。但是，作为应用程序开发人员，这可能不是我们关心的问题；*我认为，作为应用程序开发人员，我们甚至不会在我们自己的window上下文的多个文档中和整个文档中跟踪和维护Document.FrameRequestList实例。我们只是与API接口，它可以在window上访问。

现在，让我们总结一下requestAnimationFrame(<function>)实际上做了什么，和它返回了什么。

调用requestAnimationFrame并提供function作为回调，将条目 (<handler,FrameRequestCallback>或<long, "an object, with a cancelled member, that encapsulates your function">)添加到动画帧请求回调列表E 233中。requestAnimationFrame 返回 Handler [long].

根据上述规范(http://www.w3.org/TR/animation-timing/#dom-windowanimationtiming-cancelanimationframe)，

cancelAnimationFrame方法用于取消先前提出的调度动画帧更新的请求。

可以推断，通过调用cancelAnimationFrame并提供(可能以前存储的) handle作为参数，您可以从动画帧请求回调列表，中删除中的一个条目，但是不是这样的。

当调用cancelAnimationFrame(句柄)时，用户代理必须将已取消的标志设置为true，用于在此文档上注册的回调，其句柄为 handle 。无论回调是否在动画帧请求回调列表中，都会设置已取消的标记。如果给定句柄没有回调，则此函数将不执行任何操作。

因此，您在handle中提供的cancelAnimationFrame不会修改列表。它将取消的标志设置为true 'on the callback‘。这真的妨碍了它的运行。这是合理的，因为前面提到的处理模型。

因此，对于您的问题(以及对您的问题的特定评论)，跳过将条目添加到文档的动画框架请求回调列表，使用requestAnimationFrame不会阻止现有scheduled条目(或取消标志为假的现有条目)的运行。有一个“更大”的上下文和处理模型需要考虑(其中包括文档页可见性属性)。

在您的问题中，有一个注释提到，您可能希望取消日程框架请求，但更好的理由是出于无意的方面和考虑。

简而言之，如果要使用API请求执行回调的框架更新，请使用API取消/停止上述更新请求并停止回调。

Answer 2

FWIW并完成接受的答案：

我来这里是为了了解一个用requestAnimationFrame排定的函数，它改变了一个已经删除的元素(也就是。在执行DOM时，将引发一个错误。不是的.

let el = document.getElementById('element'); 
setTimeout(() => el.remove(), 20); 
setTimeout(() => {
  el.style.transform = 'scale(2)'
  console.log(el instanceof HTMLElement) // el is kept in memory but removed from the DOM
, 40) // true`. 

总之，您应该使用cancelAnimationFrame来防止由requestAnimationFrame自动调度的函数产生的副作用，并且可以选择使用它来(微)优化，避免它的执行，即使它没有副作用。