setTimeout、setInterval、requestAnimationFrame，定时器不准时的原因及解决

目录

定时器(func[, delay, arg1, arg2, ...])

区别

setTimeout固定时长后执行

setInterval间隔固定时间重复执行

相同

最短时长为4ms

相同的对象id池共享

定时器不准的原因

执行所需时间不确定

动画卡顿：刷新频率≠时间间隔

解决：requestAnimationFrame刷新频率一致

requestAnimationFrame：浏览器专门为动画提供的API

与定时器区别

1）引擎层面

setTimeout： JS引擎 ，存在事件轮询

requestAnimationFrame 属于 GUI引擎

JS引擎与GUI引擎是互斥的： GUI引擎在渲染时会阻塞JS引擎的计算

2）性能层面

当页面被隐藏或最小化时：定时器 setTimeout仍会在后台执行动画任务

当页面处于未激活的状态下，该页面的屏幕刷新任务会被系统暂停：requestAnimationFrame也会停止

---

定时器(func[, delay, arg1, arg2, ...])

区别

setTimeout固定时长后执行

setInterval间隔固定时间重复执行

相同

最短时长为4ms

相同的对象id池共享

timeoutID 值（正整数）不会被同一对象（window 或 worker）的后续调用 setTimeout() 或 setInterval() 重复使用。然而，不同的对象使用不同的 ID 池。

setTimeout() 和 setInterval() 使用共享的 ID 池，意味着在技术上可以混用 clearTimeout() 和 clearInterval()。但是，为了清楚起见，应该避免这样做

定时器不准的原因

执行所需时间不确定

setTimeout/setInterval是宏任务，根据事件轮询机制，其他任务会阻塞或延迟js任务的执行

考虑极端情况，假如定时器里面的代码需要进行大量的计算，或者是DOM操作，代码执行时间超过定时器的时间，会出现定时器不准的情况

动画卡顿：刷新频率≠时间间隔

不同设备的屏幕刷新频率可能不同， setTimeout/setInterval只能设置固定的时间间隔，这个时间和屏幕刷新间隔可能不同

setTimeout/setInterval通过设置一个间隔时间，来不断改变图像实现动画效果，在不同设备上可能会出现卡顿、抖动等现象

解决：requestAnimationFrame刷新频率一致

requestAnimationFrame：浏览器专门为动画提供的API

requestAnimationFrame刷新频率与显示器的刷新频率保持一致，使用该api可以避免使用setTimeout/setInterval造成动画卡顿的情况

requestAnimationFrame：告诉浏览器在下次重绘之前执行传入的回调函数(通常是操纵dom，更新动画的函数)

与定时器区别

1）引擎层面

setTimeout： JS引擎 ，存在事件轮询

requestAnimationFrame 属于 GUI引擎

JS引擎与GUI引擎是互斥的： GUI引擎在渲染时会阻塞JS引擎的计算

这样设计的原因，如果在GUI渲染的时候，JS同时又改变了dom，那么就会造成页面渲染不同步

2）性能层面

当页面被隐藏或最小化时：定时器 setTimeout仍会在后台执行动画任务

当页面处于未激活的状态下，该页面的屏幕刷新任务会被系统暂停：requestAnimationFrame也会停止