如何将requestAnimationFrame帧率降低?

requestAnimationFrame，以下简称为 rAF.

1. 通知浏览器某个JS代码段在执行动画
2. 浏览器会在每帧即将绘制之前，将这段代码先执行。

 

所以，rAF的刷新频率等于屏幕的刷新率。一般认为是60Hz。那么如果要实现一个15Hz刷新率的动画呢?

var fps = 15
var fpsInterval = 1000 / fps
var last = new Date().getTime() //上次执行的时刻

function animate() {

    requestAnimationFrame(animate);
    // 执行时的时间
    var now = new Date().getTime()
    var elapsed = now - last;
    // 经过了足够的时间
    if (elapsed > fpsInterval) {
        last = now - (elapsed % fpsInterval); //校正当前时间
        
        // 循环的代码
        // drawSomething()
    }
}

即在每次执行代码时，检查与上帧的时间差，如果大于指定的间隔，进行绘制，将更新上帧的时间。

以想要15Hz刷新率为例，即想要每40ms更新一次。而rAF的执行频率是17ms一次。那么实际的过程是这样的。

从0ms开始经过了17ms , 检查发现不到40ms,不绘制。

从0ms开始经过了34ms , 检查发现不到40ms,不绘制。

从0ms开始经过了51ms ，检查发现过了40ms,进行绘制。并把一次绘制时刻更新为40ms.

从0ms开始经过了68ms ,…以此类推。

 

所以，实际的绘制时刻是第 51ms, 85ms,135ms.

而理想的状态是期望它 在40ms , 80ms ,120ms绘制。

以上即是这种降低 requestAnimationFrame的原理了。保证在每个40ms时间段内有一次执行，但相临的执行之间的时间间隔不为40ms.