Why would I ever need cancelAnimationFrame ()
I don't understand why the API includes cancelAnimationFrame()
, because I can stop the animation by setting a variable continue
like this:
function draw(timestamp) {
if (continue == true) { requestAnimationFrame(draw); }
}
So questions , under what circumstances should I use cancelAnimationFrame ()?
source to share
First, an important starting point. A (dated) (Candidate Recommendation) Spec: http://www.w3.org/TR/animation-timing/#definitions
Associated with each document is an animation frame request callback list, which is a list of tuples. handle is an integer
^[long]
that uniquely identifies the entry in the list. the callback is a FrameRequestCallback object. Initially, the animation frame request callback list for the document is empty.
Also, let's keep in mind that the target audience for these specifications is user agent developers. It's in the implementation of these specifications that the user-agent provides an API to us (application developers) to interact with / to.
Pay attention to the tags of each document ; you can have multi-page documents in context, window
or... You can have multiple contexts in the viewing context.
So how does this relate to each document ? Well, the spec (Recommendation) refers to a Process Model which essentially dumps all these lists into an empty list and executes an invoke algorithm callback on the results of that 'saved' list .. but again, this is probably not a problem for us. as application developers * I THINK we as application developers won't even track and maintain Document.FrameRequestList instances across multiple documents in our own context window
, we're just interacting with the API available at window
.
Now let's summarize what it does requestAnimationFrame(<function>)
, AND what it returns.
Calling requestAnimationFrame
and providing function
as a callback , adds an entry( <handler,FrameRequestCallback>
or <long, "an object, with a cancelled member, that encapsulates your function">
) a callback request into the animation frame . returns . requestAnimationFrame
Handler [long]
According to the above spec ( http://www.w3.org/TR/animation-timing/#dom-windowanimationtiming-cancelanimationframe ),
The cancelAnimationFrame method is used to cancel a previously made request to schedule an animation frame update.
It can be inferred that by calling cancelAnimationFrame
and supplying (presumably previously stored) handle
as a parameter, you are removing the entry from the animation request callback list > / strong>, BUT you are not.
When calling cancelAnimationFrame (handle), the user agent must set the canceled flag to true for the callback registered in this document whose handle is handle . The override flag is set whether the callback in the animation request callback list is > or not. If there is no callback with the given handle, this function does nothing.
This way, handle
which you provide in yours cancelAnimationFrame
doesn't change the list. it sets the canceled flag to true 'on callback' .. which really doesn't let it work. This is reasonable because the above (above) Processing Model .
So to your question (and in relation to the specific comment on your question), skipping adding an entry to the callback list document using requestAnimationFrame
doesn 'keep existing records scheduled
(or existing records whose flag is cleared) from running. There is a more "advanced" context and processing model (which includes visibility attributes on the document page).
Your question mentioned that there are certain scenarios that may require you to cancel your staffing schedule requests, but it's better to do this for unintended aspects and considerations.
In short, if you are going to use an API to request frame updates that do callbacks, use the API to cancel / stop said update requests and stop the callback.
source to share
FWIW and complete the accepted answer:
I came here to find out if the error throws a function scheduled with requestAnimationFrame
that modifies an element already removed (aka not connected) from the DOM on execution. This is not the case, i.e .:
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'.
To summarize, you MUST use cancelAnimationFrame
to prevent side effects from the automatic scheduling function with requestAnimationFrame
, and you MAY additionally use it for (micro-) optimization by avoiding it even if it has no side effects.
source to share