request-animation-frames
Use
requestAnimationFrameas 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-framesUsage
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