Sometimes, we want to control fps with requestAnimationFrame in JavaScript.
In this article, we’ll look at how to control fps with requestAnimationFrame in JavaScript.
How to control fps with requestAnimationFrame in JavaScript?
To control fps with requestAnimationFrame in JavaScript, we can use the setTimeout function.
For instance, we write
const fps = 25;
const animate = () => {
// ...
setTimeout(() => {
requestAnimationFrame(animate);
}, 1000 / fps);
};
animate();
to create the animate function that calls setTimeout with a callback that calls requestAnimationFrame with animate.
We control the fps by setting the delay for setTimeout to 1000 / fps.
The animation code is run before we setTimeout.
Conclusion
To control fps with requestAnimationFrame in JavaScript, we can use the setTimeout function.
