为什么我需要cancelAnimationFrame()

Question

我不明白为什么API包含cancelAnimationFrame(),因为我可以通过设置这样的continue变量来停止动画:

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

那么问题是在什么情况下我应该使用cancelAnimationFrame()？

Answer 1

首先，一个重要的参考点。（已注明日期）（候选推荐）规范：http ://www.w3.org/TR/animation-timing/#definitions

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

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

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

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

现在，让我们总结一下requestAnimationFrame(<function>)实际执行的操作以及返回的结果。

调用requestAnimationFrame并提供 afunction作为回调，将一个条目（<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，以将在此文档上注册的回调（其句柄为handle ）。无论回调是否在动画帧请求回调列表中，都会设置已取消标志。如果给定句柄没有回调，则此函数不执行任何操作。

因此，handle您提供的内容cancelAnimationFrame不会修改列表。它在“回调时”将取消标志设置为 true ..这确实阻止了它运行。这是合理的，因为前面提到的（上面）的处理模型。

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

在您的问题中的评论中提到，在某些特定场景中您可能希望取消计划框架请求 - 但这样做的更好理由是出于无意的方面和考虑。

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