requestAnimationFrame (定时&&动画)

最新推荐文章于 2025-06-25 22:00:44 发布

久光

最新推荐文章于 2025-06-25 22:00:44 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Charlene_lx/article/details/90174206

本文深入探讨了HTML5新增的requestAnimationFrame定时器，详细介绍了其工作原理、优势与局限性，并通过实例展示了如何使用此API实现流畅的动画效果。与setTimeout相比，requestAnimationFrame在页面不可见时会暂停渲染，更高效地配合屏幕刷新率执行动画更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

requestAnimationFrame是HTML5新增的定时器,不需要设置时间间隔

cancelAnimationFrame方法用于取消定时器

requestAnimationFrame(调用函数)

优点:
1\性能好,页面处于不可见或不可用状态requestAnimationFrame会暂停渲染,setTimeout不会.
1\它能够保证我们的动画函数的每一次调用都对应着一次屏幕重绘
3\函数节流,requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次
缺点:
1\兼容问题
2\

 <div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
   <input type="button" value="Run" id="run"/>    

<script type="text/javascript">
        var ele = document.getElementById("test");
        var progress = 0;
        
        function step(timestamp) {
            progress += 1;
            ele.style.width = progress + "%";
            ele.innerHTML=progress + "%";
            if (progress < 100) {
                requestAnimationFrame(step);
            }
        }
        requestAnimationFrame(step);
</scirpt>