setInterval、setTimeout、requestAnimationframe对比

最新推荐文章于 2025-04-01 14:52:19 发布

卷帘依旧

最新推荐文章于 2025-04-01 14:52:19 发布

阅读量351

点赞数

分类专栏：学习笔记文章标签：前端动画

本文链接：https://blog.youkuaiyun.com/weixin_43276913/article/details/105347284

版权

本文对比了前端开发中常用的定时器方法setTimeout、setInterval和requestAnimationFrame。setTimeout和setInterval是异步执行，时间间隔受浏览器任务队列影响，可能导致动画不流畅。而requestAnimationFrame则与屏幕刷新率同步，确保动画流畅，且在页面隐藏或最小化时智能暂停，减少资源消耗，提高性能。

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

定时器方法：

setTimeout(): 设定时间后执行函数

setInterval(): 每隔一段时间执行一次函数

requestAnimationFrame(): 与屏幕的刷新频率保持一致

三者对比：

setTimeout和setInterval为异步事件，内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器任务队列中等待执行的时间；如果任务队列中有其它事件，那么要等待前面的任务执行完成后再执行；
requestAnimationFrame采用系统刷新频率，保持动画流畅、不卡顿
- rAf会把每一帧中的DOM操作几种起来，在一次重绘或回流中完成；
- 页面最小化之后，rAF会停止执行，页面打开之后会继续上次运行的位置继续运行，有效节省CPU开销；
- rAF在隐藏或不可见元素中将不进行回流或重绘，更少地CPU、GPU和内存使用量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器对比</title&