requestAnimationFrame和cancelAnimationFrame

最新推荐文章于 2025-04-06 19:55:06 发布

莓莓儿～

最新推荐文章于 2025-04-06 19:55:06 发布

阅读量1.2k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/fanfan_h/article/details/91146673

版权

JS 专栏收录该内容

49 篇文章

订阅专栏

1.requestAnimationFrame

与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

var dis = 0,timer = 0;
clearInterval(timer);
timer = setInterval(function(){
   div.style.left = ++dis;
　　if(dis>=50) clearInterval(timer)
},16)

实现js动画最好的是requestAnimationFrame:

requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：

1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

var dis =0;
function animation(){
  requestAnimationFrame(function(){
      div.style.left = ++dis;
      if(disx<50) animation();
  })  
}
animation();

2.window.cancelAnimationFrame

取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求.

参数：

先前调用window.requestAnimationFrame()方法时返回的ID.

<script>
    var id = null;

    function a(time) {
        console.log("animation");
        id = window.requestAnimationFrame(a);
        window.cancelAnimationFrame(id);
    }
    a();
    function b(time) {
        console.log("1");
        id = window.requestAnimationFrame(a);

    }
    b();
    window.cancelAnimationFrame(id);

</script>