用requestAnimationFrame和cancelAnimationFrame取代定时器setTimeout和clearTimeout

矫情吗；* 2022-05-11 00:00 221阅读 0赞

1. 浏览器的刷新时间和定时器的时间不同，会出现掉帧现象，定时器的时间越短，掉帧越严重。定时器的时间并不是非常精准，会将定时器放在执行队列中，也是要花费时间的。

浏览器的刷新时间大约是16ms（电脑此时的性能等因素），所以定时器的时间过短，页面没有刷新，动画效果根本没有。

理解：两条线，第一条线：浏览器每16ms刷新一次，页面将显示最新的内容；第二条线：定时器每多少ms执行一次，每一次执行定时器，结果都会发生变化，但是，页面不刷新，有的变化结果不会及时显示，就出现了掉帧现象。

2. requestAnimationFrame和cancelAnimationFrame：

页面刷新前执行一次该方法；用法和setTimeout相似；兼容性IE10以上

**3. 用requestAnimationFrame和cancelAnimationFrame方法写一个小物块运动**

注意：

（1）封装requestAnimationFrame和cancelAnimationFrame方法；

（2）写一个运动函数move，用法类似setTimeout，在move函数内执行requestAnimationFrame方法，并赋唯一标识

（3）在move函数中，当一定条件下，cancelAnimationFrame（标识），取消这个运动。

（4）时间 1000/ 60 是大约是16ms。

**4. 用setTimeout和clearTimeout写一个小物块运动**

<div id="btn"></div>
        <script>
            var timer; //唯一标识
            function move(){
                btn.style.left = btn.offsetLeft + 10 + 'px';
                if(btn.offsetLeft >= 300){
                    clearTimeout(timer);
                    btn.style.left = '300px';
                }else {
                    timer = setTimeout(function(){
                        move();
                    }, 16)
                }
            }
            move();
        </script>