requestAnimationFrame定时器

Posted 2023-03-31 小叶_01

requestAnimationFrame

1.介绍

HTML5新增的定时器,是一个用于优化动画效果的API,会在下一次浏览器重绘之前执行回调函数.

2.优点

1.cpu节能:对于隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流;在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停.

2.函数节流:在高频率事件( resize, scroll 等)中，为了防止在一个刷新间隔内发生多次函数执行，RequestAnimationFrame 可保证每个刷新间隔内，函数只被执行一次.

3.减少Dom操作:requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒 60 帧

3.requestAnimationFrame的使用

equestAnimationFrame的用法与settimeout很相似，只是不需要设置时间间隔而已.它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行.

var timer = requestAnimationFrame(function()
    console.log(0);
); 
cancelAnimationFrame(timer);
cancelAnimationFrame(1); 都能取消

cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn()
     if(parseInt(myDiv.style.width) < 500)
          timer = requestAnimationFrame(fn);
      else
           cancelAnimationFrame(timer);
          
);

4.requestAnimationFrame和setTimeout的区别是什么

requestAnimationFrame和setTimeout的区别包括：

• 执行时机：requestAnimationFrame会在下一次重绘之前执行回调函数，而setTimeout会在指定的时间间隔之后执行回调函数。
• 精度和性能：由于requestAnimationFrame会根据浏览器的刷新率来执行回调函数，因此可以实现更加精确和高效的动画效果，而setTimeout则可能会出现卡顿或闪烁的情况。
• 兼容性：requestAnimationFrame在一些老版本的浏览器中可能不支持，而setTimeout则是比较通用的方法

5.setTimeout 执行动画的缺点

它通过设定间隔时间来不断改变图像位置，达到动画效果。但是容易出现卡顿、抖动的现象；原因是：

1.settimeout 任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚；

2.settimeout 的固定时间间隔不一定与屏幕刷新间隔时间相同，会引起丢帧

6.如何兼容不支持requestAnimationFrame的浏览器？

if (!window.requestAnimationFrame) 
  window.requestAnimationFrame = function(callback) 
    return setTimeout(callback, 1000 / 60);
  ;