requestAnimationFrame、setInterval、setTimeout 对比

在前端开发中，requestAnimationFrame、setInterval、setTimeout 是三个常用的定时器函数，它们各自具有不同的功能和适用场景。下面是对这三个函数的功能解析与优劣对比：

 

一、功能解析

1. requestAnimationFrame

功能：requestAnimationFrame 是浏览器用于定时循环操作的一个接口，主要用于按帧对网页进行重绘，以支持各种网页动画效果（如DOM动画、Canvas动画、SVG动画、WebGL动画）。

工作原理：当调用 requestAnimationFrame 并传入一个回调函数时，浏览器会在下次重绘之前调用这个回调函数。如果需要在动画的每一帧都执行某些操作，回调函数需要再次调用 requestAnimationFrame 以实现循环。

优点：

更精确的定时控制：由于它基于浏览器的重绘频率，所以动画的帧率是稳定的。

性能优化：在浏览器不处于激活状态时，requestAnimationFrame 的回调函数不会执行，有助于节省系统资源。

更好的兼容性：现代浏览器普遍支持。

缺点：

兼容性问题：在老旧浏览器中可能需要前缀或降级处理。

主线程繁忙时性能下降：如果主线程被其他任务占用，动画效果可能受到影响。

2. setTimeout

功能：setTimeout 用于在指定的毫秒数后执行一段代码或函数。

（实现动画效果是通过设置一个间隔时间来不断的改变图像的位置：缺点：可能会出现抖动的现象。原因：1：settimeout汉寿是异步任务，2：刷新频率受屏幕尺寸和屏幕分辨率影响）

工作原理：setTimeout 将函数推入异步任务队列，等待当前执行栈清空后，根据设定的时间间隔（可能会有延迟）执行该函数。

优点：

简单易用：语法简单，易于理解和使用。

灵活性强：可以设定一次性的延迟执行。

缺点：

时间间隔不精确：实际执行时间可能会比设定的时间晚，因为受到任务队列和执行栈的影响。

资源消耗：如果页面被隐藏或最小化，setTimeout 仍然会在后台执行，浪费资源。

3. setInterval

功能：setInterval 按照指定的周期（以毫秒计）来重复执行代码或函数。

工作原理：setInterval 会周期性地调用函数，直到调用 clearInterval 停止定时器。

优点：

周期性执行：适用于需要定时重复执行的任务，如轮询服务器数据。

缺点：

时间间隔不精确：与 setTimeout 类似，实际执行时间可能受到浏览器解析和执行代码速度的影响。

资源消耗：如果页面被隐藏或最小化，setInterval 仍然会不断执行，浪费资源。

可能导致的性能问题：如果回调函数执行时间过长，可能会导致多个回调函数同时执行，造成性能问题。

二、优劣对比

 requestAnimationFrame setTimeout setInterval

功能 按帧重绘动画 延迟执行代码 周期性执行代码

定时精确性 高（基于浏览器重绘频率） 低（可能受到任务队列和执行栈影响） 低（与setTimeout类似）

性能优化 是（非激活状态不执行） 否（后台仍执行） 否（后台仍执行）

适用场景 网页动画 一次性延迟任务 周期性任务

易用性 中等（需要循环调用） 高 高

资源消耗 低（非激活状态不执行） 中等（后台执行可能浪费资源） 中等（与setTimeout类似）

 

 

综上所述，在选择使用 requestAnimationFrame、setTimeout 还是 setInterval 时，应根据具体需求和应用场景来决定。对于动画效果，推荐使用 requestAnimationFrame 以获得更平滑的动画体验和更好的性能；对于一次性延迟任务，可以使用 setTimeout；对于周期性任务，如果时间间隔不是非常关键，也可以使用 setInterval，但需要注意其可能带来的性能问题和资源消耗。