# Throttling (aka Forcing a Framerate on) requestAnimationFrame! **URL:** \ **Category:** Uncategorized\ **Created:** [June 12, 2017, 2:41am UTC](https://forum.kirupa.com/t/throttling-aka-forcing-a-framerate-on-requestanimationframe/636753 "2017-06-12T02:41:21Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [June 12, 2017, 2:41am UTC](https://forum.kirupa.com/t/throttling-aka-forcing-a-framerate-on-requestanimationframe/636753/1 "2017-06-12T02:41:21Z")
With devices (like the new iPad) featuring displays over 60Hz, there is a good chance that browsers will be running at rates greater than 60Hz as well. That’s great for everyone except those of us who used `requestAnimationFrame` thinking that rates will stay fixed at 60Hz, To force a frame rate, check out the following snippet: ``` var currentTime; var elapsedTime; var startTime; // set the frame rate you want! var fps = 60; var interval = 1000 / fps; function loop() { currentTime = performance.now(); elapsedTime = currentTime - startTime; if (elapsedTime > interval) { // this seems weird, but it is done to account for // the time it takes to display a frame startTime = currentTime - (elapsedTime % interval); // // Your animation code goes below! // } requestAnimationFrame(loop); } // Start the timer! function start() { startTime = performance.now(); requestAnimationFrame(loop); } start(); ``` I’ll write this up more formally with some examples shortly, but this may help for now 🙂 If you have no idea what I am talking about, read up on `requestAnimationFrame` [in this tutorial](https://www.kirupa.com/html5/animating_with_requestAnimationFrame.htm). Cheers, Kirupa ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [June 15, 2017, 6:07am UTC](https://forum.kirupa.com/t/throttling-aka-forcing-a-framerate-on-requestanimationframe/636753/2 "2017-06-15T06:07:05Z")
Here is an example of this code in action: ``` requestAnimationFrame Throttling Example

Frames per second:

``` ---
**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\ **Post date:** [June 16, 2017, 6:00am UTC](https://forum.kirupa.com/t/throttling-aka-forcing-a-framerate-on-requestanimationframe/636753/3 "2017-06-16T06:00:26Z")
> [@kirupa](#): > > // set the frame rate you want! > var fps = 60; I think it’d be useful to provide advice on when & why someone would pick a particular frame rate. When do I pick 120, 60, 30, 24, 12, etc. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [June 16, 2017, 3:46pm UTC](https://forum.kirupa.com/t/throttling-aka-forcing-a-framerate-on-requestanimationframe/636753/4 "2017-06-16T15:46:42Z")
Good point! I’ll be sure to mention that in the article 🙂