-
-
Save jeongsd/64f68e9779f231ec32b04d24f080d24b to your computer and use it in GitHub Desktop.
Limit the frame-rate being targeted with requestAnimationFrame
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| limitLoop.js - limit the frame-rate when using requestAnimation frame | |
| Why use it? | |
| ---------------- | |
| A consistent frame-rate can be better than a janky experience only | |
| occasionally hitting 60fps. Use this trick to target a specific frame- | |
| rate (e.g 30fps, 48fps). | |
| Solution | |
| ---------------- | |
| When we draw, deduct the last frame's execution time from the current | |
| time to see if the time elapsed since the last frame is more than the | |
| fps-based interval or not. Should the condition evaluate to true, set | |
| the time for the current frame which will be the last frame execution | |
| time in the next drawing call. | |
| Prior art / inspiration | |
| ------------------------ | |
| http://cssdeck.com/labs/embed/gvxnxdrh/0/output | |
| http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/ | |
| and the comment by Yannick Albert | |
| */ | |
| var limitLoop = function (fn, fps) { | |
| var defaultFps = 60; | |
| var then = new Date().getTime(); | |
| var oldtime = 0; | |
| fps = fps || defaultFps; | |
| return (function loop(time) { | |
| requestAnimationFrame(loop); | |
| var interval = 1000 / (this.fps || fps); | |
| var now = new Date().getTime(); | |
| var delta = now - then; | |
| if (delta > interval) { | |
| // update time | |
| then = now - (delta % interval); | |
| // calculate fps | |
| var frames = 1000 / (time - oldtime) | |
| oldtime = time; | |
| // call the fn, pass current fps to it | |
| fn(frames); | |
| } | |
| }(0)); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var set; | |
| document.onclick = function () { | |
| set = true; | |
| }; | |
| function test(fps) { | |
| if (set) { | |
| this.fps = 15; | |
| } | |
| console.log(fps); | |
| } | |
| limitLoop(test, 30); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment