简单的讲requestAnimationFrame就是一个以屏幕刷新率间隔时间的定时器,requestAnimationFrame回调函数执行频率紧跟刷新频率且执行在重绘之前。
用 requestAnimationFrame 实现节流 节流(throttle)
- let animationFrameID = null;
- let lastTime = new Date().getTime()
- function logTimeDiff(){
- const nowTime = new Date().getTime();
- console.log(nowTime - lastTime )
- lastTime = nowTime;
- }
- function throttle() {
- window.cancelAnimationFrame(animationFrameID);
- animationFrameID = window.requestAnimationFrame(() => {
- logTimeDiff();
- // 动画
- });
- }
- // 每隔一毫秒调用,而 logTimeDiff 实际执行时间间隔为 (1000/帧率)ms
- setInterval(()=>{throttle();},1)
-
- // 递归调用结构更简单,以下代码中logTimeDiff 执行频率与屏幕刷新率相同
- // 即间隔(1000/帧率)ms 执行一次
- (function recursion() {
- logTimeDiff();
- window.requestAnimationFrame(recursion);
- })();
-
-
输出结果如下
在 scroll 回调或者 mousemove 回调中执行js实现的动画时,若直接写入其中回调,调用频率将非常之高,资源耗费也较高,
将其写入 requestAnimationFrame 中一方面可以减少调用次数,降低资源耗费,另一方面也可以使得 js 实现动画流畅(因为执行频率紧跟刷新率)