request-animation-frames
Use
requestAnimationFrame
as an async iterable, in any JavaScript environment
This package ponyfills requestAnimationFrame
internally when not available, so it works in any JavaScript environment.
Install
npm install request-animation-frames
Usage
import requestAnimationFrames from 'request-animation-frames';
for await (const timestamp of requestAnimationFrames()) {
console.log('Animation frame timestamp:', timestamp);
drawVisualization();
}
API
requestAnimationFrames()
Returns an AsyncIterable
that yields animation frame timestamps.
The first timestamp is yielded right away for easier setup.
FAQ
How do I stop the iteration?
Simply return
or break
in the loop body.
How do I stop the iteration from the outside?
import requestAnimationFrames from 'request-animation-frames';
let shouldStop = false;
(async () => {
for await (const timestamp of requestAnimationFrames()) {
if (shouldStop) {
break;
}
console.log('Animation frame timestamp:', timestamp);
}
})();
setTimeout(() => {
shouldStop = true;
}, 10000);
Related
- dom-mutations - Observe changes to the DOM using an async iterable