【JavaScript 刨根问底之】requestAnimationFrame以及延时器

requestAnimationFrame

这里会说下requestAnimationFrame的由来，以及为什么会出现它。同时也会横向对比下定时器以及延时器

早期的动画

动画是一个持续的过程。早期的时候动画都是通过定时器来实现的。看如下代码

(function() {
 function updateAnimations() {
 doAnimation1();
 doAnimation2();
 // 其他任务
 }
 setInterval(updateAnimations, 100);
})();

• 一般的计算器显示器的屏幕刷新频率是60HZ，这就意味着是每秒要绘制60次。大多数浏览器都会显示绘制频率。
• 为了实现动画效果过渡平滑最佳的重绘间隔大约17/毫秒。以这个速度重绘可以实现最佳的滑动效果。
• 但是即使是这样依然无法保证能平滑过度。因为延时器/定时器的执行的时机不定。虽然可以设置执行时间。即使将延时任务添加到队列中也无法保证能立马执行。这取决于上一个任务或是同步任务执行的时间长度
• 从js层面无法得知浏览器的绘制时机。所以函数requestAnimationFrame就出现了

函数requestAnimationFrame

1. 执行时机

• 在每次浏览器重绘之前执行

2. 使用方法

• 函数requestAnimationFrame只允许传递一个参数。而且参数必须是一个函数
• 参数函数会被加入到队列。在每次浏览器绘制之前将队列中的函数进行执行
• 每添加一次再下次绘制执行后，需要再次添加

function updateProgress() {
 var div = document.getElementById("status");
 div.style.width = (parseInt(div.style.width, 10) + 5) + "%";
 if (div.style.left != "100%") {
 requestAnimationFrame(updateProgress);
 }
}
requestAnimationFrame(updateProgress);

3. 如何取消

在全局中提供了函数cancelAnimationFrame. 可以通过函数进行取消。大致的原理跟延时器/ 定时器保持一致

• 在函数requestAnimationFrame将函数加入队列后，会返回一个id(可以将id理解为队列的位置)。可以通过执行函数cancelAnimationFrame来进行取消

let requestID = window.requestAnimationFrame(() => {
 console.log('Repaint!');
});
window.cancelAnimationFrame(requestID);

通过函数requestAnimationFrame进行节流处理

let enabled = true;
function expensiveOperation() {
 console.log('Invoked at', Date.now());
}
window.addEventListener('scroll', () => {
 if (enabled) {
 enabled = false;
 window.requestAnimationFrame(expensiveOperation);
 window.setTimeout(() => enabled = true, 50);
 }
});