为什么我需要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

与每个Document相关联的是动画帧请求回调列表，它是元组列表。 handle是一个整数^[long] ，用于唯一标识列表中的条目。 callback是一个FrameRequestCallback对象。 最初，Document的动画帧请求回调列表为空。

另外，请记住，这些规范的目标受众是用户代理开发人员。 正是在这些规范的实现中，用户代理为我们（应用程序开发人员）提供了一个API来与之交互。

请注意上面的每个文档情绪; 您可以在window或上下文中包含多个文档。 你可以在一个浏览器上下文的多重执行绪 。

那么，这与每篇文档有何关系？ 好吧，（推荐）规范引用了过程模型 ，它基本上将所有这些列表转储到一个空列表中，并对“保留”列表的结果执行回调调用算法 ..但是，这可能不是一个问题作为应用程序开发人员; *我认为 ，作为应用程序开发人员，我们不会在我们自己的window 上下文的多个文档中及其中跟踪和维护Document.FrameRequestList实例。 我们只是与API接口，可在window访问。

现在，让我们总结一下requestAnimationFrame(<function>)确实有效， 并 返回什么。

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

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

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

可以推断，通过调用cancelAnimationFrame并提供（可能是先前存储的） handle作为参数，您可以从动画帧请求回调列表中 删除一个条目， 但事实并非如此。

当调用cancelAnimationFrame（handle）时，用户代理必须将已取消的标志设置为true，以便在其句柄为句柄的此Document上注册的回调。 设置取消标志是否回调是否在动画帧请求回调列表中 。 如果给定句柄没有回调，则此函数不执行任何操作。

因此，您在cancelAnimationFrame中提供的handle不会修改列表。 它将取消的标志设置为true'在回调'..这确实使它无法运行。 这是合理的，因为前面提到的（上面） 处理模型 。

---

因此，对于您的问题（以及关于您的问题的特定评论）跳过添加文档的动画帧请求回调列表的条目，使用requestAnimationFrame不会保留现有的scheduled条目（或已取消的现有条目）来自跑步的旗帜是假的。 需要考虑“更大”的上下文和处理模型（包括文档页面可见性属性）。

在您的问题中，有人提到您可能希望取消计划框架请求的特定场景 - 但更好的理由是针对无意的方面和注意事项。

简而言之，如果您要使用API​​来请求执行回调的帧更新，请使用API​​取消/停止所述更新请求并停止回调。