为什么requestAnimationFrame(请求动画帧) 比setTimeout、setInterval有什么优势？怎么去应用？

最新推荐文章于 2024-06-21 08:42:30 发布

前端菜鸡小卒

最新推荐文章于 2024-06-21 08:42:30 发布

阅读量792

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_30376375/article/details/106541508

版权

requestAnimationFrame优势

1、由系统来决定回调函数的执行时机。

requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。比如，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms。

什么是屏幕刷新频率？

对于一般笔记本电脑，这个频率大概是60Hz，当你对着电脑屏幕什么也不做的情况下，显示器也会以每秒60次的频率正在不断的更新屏幕上的图像(屏幕上的图像每秒钟出现的次数)。

为什么出现setTimeout引起丢帧现象(出现卡顿、抖动)？

1.setTimeout的执行时间并不是确定的。在Javascript中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。

2.刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。

2、CPU节能

使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。

3、函数节流

在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。

应用场景：

1. 怎么停止requestAnimationFrame？

cancelAnimationFrame()：requestAnimationFrame默认返回一个id，cancelAnimationFrame只需要传入这个id就可以停止。

<!doctype html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #e{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
            zoom: 1;
        }
    </style>
</head>
<body>
<div id="e"></div>
<script>
    let e = document.getElementById("e");
    let flag = true;
    let left = 0;
    let rafId = null

    function render() {
        if(flag == true){
            if(left>=100){
                flag = false
            }
            e.style.left = ` ${left++}px`
        }else{
            if(left<=0){
                flag = true
            }
            e.style.left = ` ${left--}px`
        }
    }
    // requestAnimationFrame效果
    (function animloop(time) {
        console.log(time,Date.now())
        render();
        rafId = requestAnimationFrame(animloop);
        //如果left等于50 停止动画
        if(left == 50){
            cancelAnimationFrame(rafId)
        }
    })();
    // setInterval效果
    // setInterval(function(){
    //     render()
    // },1000/60)

</script>
</body>
</html>

2. 如果想动画频率降低怎么做？(为什么不考虑加快，当前刷新频率已经是屏幕的刷新频率了再快也没有意义了)

<!doctype html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #e{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
            zoom: 1;
        }
    </style>
</head>
<body>
<div id="e"></div>
<script>
    let e = document.getElementById("e");
    let flag = true;
    let left = 0;
    // 当前执行时间
    var nowTime = 0;
    // 记录每次动画执行结束的时间
    var lastTime = Date.now();
    // 我们自己定义的动画时间差值
    var diffTime = 40;
    function render() {
        if(flag == true){
            if(left>=100){
                flag = false
            }
            e.style.left = ` ${left++}px`
        }else{
            if(left<=0){
                flag = true
            }
            e.style.left = ` ${left--}px`
        }
    }
    // requestAnimationFrame效果
    (function animloop() {
        // 记录当前时间
        nowTime = Date.now()
        // 当前时间-上次执行时间如果大于diffTime，那么执行动画，并更新上次执行时间
        if(nowTime-lastTime > diffTime){
            lastTime = nowTime
            render();
        }
        requestAnimationFrame(animloop);
    })()
</script>
</body>
</html>