WHAT - requestAnimationFrame 介绍

一、前言

在 HOW - 前端定时器实践（含防抖、interval 模拟） 中我们简单介绍过 requestAnimationFrame 替代定时器。

对于动画效果，推荐使用 requestAnimationFrame 方法，它可以更有效地与浏览器的绘制周期同步，提供更流畅的动画效果，并且不会出现页面不可见时的执行问题。

二、requestAnimationFrame

2.1 基本用法

requestAnimationFrame 是一个用于在浏览器中执行动画的 JavaScript 方法。它会告诉浏览器您希望执行动画，并请求浏览器在下一次重绘之前调用指定的回调函数来更新动画。这样可以确保动画在浏览器的帧率下执行，从而提供更加平滑和高效的动画效果。

使用 requestAnimationFrame 比使用 setTimeout 或 setInterval 更加优雅和高效，因为它会自动同步到浏览器的刷新频率，避免了在不同的设备上出现的动画卡顿或过度绘制的问题，即闪烁或者掉帧。

基本用法如下：

function animate() {
  // 在这里执行动画操作
  // ...
  
  requestAnimationFrame(animate); // 递归调用自身，以实现动画的连续运行
}
animate(); // 开始动画

在上面的例子中，animate 函数会在下一次重绘之前执行，从而实现了动画效果。requestAnimationFrame 方法会返回一个标识符，可以用来取消动画，例如使用 cancelAnimationFrame 方法。

总之，requestAnimationFrame 是一个用于执行动画的高性能 API，能够帮助开发者创建流畅且性能良好的动画效果。

2.2 替代计时器实现节流

计时器实现：

const throttle = (fn, delay) => {
  let lastExecutedTime = 0;
  return function(...args) {
    const currentTime = Date.now();
    if (currentTime - lastExecutedTime >= delay) {
      fn.apply(this, args);
      lastExecutedTime = currentTime;
    }
  }
}
const throttleFunc = throttle(() => {
  console.log('节流');
}, 1000)
window.addEventListener('scroll', throttleFunc);

requestAnimationFrame 实现：

const throttleWithRAF = (fn) => {
  let isThrottled = false;
  return function (...args) {
    if (!isThrottled) {
      isThrottled = true;
      fn.apply(this, args);
      requestAnimationFrame(() => {
        isThrottled = false;
      });
    }
  };
};
const throttleFunc = throttleWithRAF(() => {
  console.log('Throttled function');
});
window.addEventListener('scroll', throttleFunc);

在这个实现中，isThrottled 变量用来标记是否处于节流状态。当函数被调用时，如果不处于节流状态，则立即执行函数并将 isThrottled 置为 true，然后调用 requestAnimationFrame 来设置一个回调，在回调中将 isThrottled 重新置为 false，以便下一次滚动事件时函数可以再次被执行。由于 requestAnimationFrame 会在浏览器下一次重绘之前执行回调函数，因此可以有效地控制动画的执行频率，实现节流的效果。