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

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

叨唠

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

阅读量1.7k

点赞数

分类专栏：前端web HTML5 文章标签： web前端 HTML5 requestAnimationFrame cancelAnimationFrame

本文链接：https://blog.csdn.net/zyz00000000/article/details/82759641

版权

前端web 同时被 2 个专栏收录

66 篇文章 1 订阅

订阅专栏

HTML5

19 篇文章 0 订阅

订阅专栏

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

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

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

2. requestAnimationFrame和cancelAnimationFrame：

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

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

    <style>
        #btn{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
<body>
    <div id="btn"></div>
    <script>
        //封装一个兼容性良好的方法
        window.requestAnimFrame= (function(){
            return window.requestAnimationFrame ||
             window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame ||
              function(callback){
                  window.setTimeout(callback, 1000 / 60);
              }
        })();
        window.cancelAnimFrame = (function(){
            return window.cancelAnimationFrame ||
            window.webkitCancelAnimationFrame ||
            window.mozCancelAnimationFrame ||
            function(id){
                window.clearTimeout(id);
            }
        })();
        var req;//唯一标示，类似于timer；    
        function move(){
            btn.style.left = btn.offsetLeft + 10 +'px';
            if(btn.offsetLeft >= 300){
                cancelAnimFrame(req);
                btn.style.left = '300px';
            }else {
                req = requestAnimFrame(move);
            }
        }
        move();
    </script>
</body>

注意：

（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>

叨唠

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
用requestAnimationFrame和cancelAnimationFrame取代定时器setTimeout和clearTimeout

1. 浏览器的刷新时间和定时器的时间不同，会出现掉帧现象，定时器的时间越短，掉帧越严重。定时器的时间并不是非常精准，会将定时器放在执行队列中，也是要花费时间的。浏览器的刷新时间大约是16ms（电脑此时的性能等因素），所以定时器的时间过短，页面没有刷新，动画效果根本没有。理解：两条线，第一条线：浏览器每16ms刷新一次，页面将显示最新的内容；第二条线：定时器每多少ms执行一次，每一次执行定时...
复制链接

扫一扫

专栏目录