如何将requestAnimationframe限制为特定帧速率
演示以5 FPS的速度节流：http :
//jsfiddle.net/m1erickson/CtsY3/
此方法通过测试自执行最后一个帧循环以来的经过时间来工作。
仅当指定的FPS间隔过去时，图形代码才会执行。
代码的第一部分设置了一些用于计算经过时间的变量。
var stop = false;var frameCount = 0;var $results = $("#results");var fps, fpsInterval, startTime, now, then, elapsed;// initialize the timer variables and start the animationfunction startAnimating(fps) { fpsInterval = 1000 / fps; then = Date.now(); startTime = then; animate();}这段代码是实际的requestAnimationframe循环，以您指定的FPS绘制。
// the animation loop calculates time elapsed since the last loop// and only draws if your specified fps interval is achievedfunction animate() { // request another frame requestAnimationframe(animate); // calc elapsed time since last loop now = Date.now(); elapsed = now - then; // if enough time has elapsed, draw the next frame if (elapsed > fpsInterval) { // Get ready for next frame by setting then=now, but also adjust for your // specified fpsInterval not being a multiple of RAF's interval (16.7ms) then = now - (elapsed % fpsInterval); // Put your drawing pre here }}
