前端神技：requestAnimationFrame 巧用防抖+节流，让页面操作更丝滑

2023-09-22 19:39:04

requestAnimationFrame 简介

requestAnimationFrame 是一个浏览器提供的 API，它可以让你以每秒 60 帧的速度来执行动画和更新页面内容。这意味着，如果你的页面每秒渲染 60 次，那么 requestAnimationFrame 会在每次渲染之前调用你提供的回调函数，这样你就可以在回调函数中进行必要的更新操作。

requestAnimationFrame 的工作原理如下：

浏览器会根据屏幕的刷新率创建一个回调队列。
当你调用 requestAnimationFrame 时，浏览器会将你的回调函数添加到队列中。
浏览器会以每秒 60 帧的速度执行回调队列中的回调函数。

requestAnimationFrame 具有以下优点：

它可以让你创建流畅的动画。
它可以提高页面的响应速度。
它可以减少不必要的重绘。

防抖与节流

防抖和节流都是用来优化函数调用的两种技术。它们的工作原理和应用场景略有不同，但最终目标都是为了提高页面的性能和用户体验。

防抖

防抖是指在一段时间内只执行一次函数，即使在这个时间段内函数被多次调用。防抖的实现原理是使用一个计时器。当函数被调用时，计时器会启动。如果在计时器结束之前函数又被调用，计时器会重新启动。这样，函数只会在这个时间段内执行一次。

防抖常用于处理用户输入事件，例如键盘输入和鼠标移动。通过防抖，可以减少不必要的函数调用，从而提高页面的响应速度。

节流

节流是指在一段时间内只执行一次函数，但与防抖不同的是，节流会在时间段结束时执行函数。节流的实现原理是使用一个计时器。当函数被调用时，计时器会启动。如果在计时器结束之前函数又被调用，计时器会重新启动。这样，函数会在时间段结束时执行一次。

节流常用于处理频繁的事件，例如滚动事件和窗口调整事件。通过节流，可以减少不必要的函数调用，从而提高页面的性能。

requestAnimationFrame 与防抖、节流

requestAnimationFrame 可以与防抖和节流结合使用，以实现更好的优化效果。

requestAnimationFrame 与防抖

将 requestAnimationFrame 与防抖结合使用，可以实现以下效果：

减少不必要的函数调用。
提高页面的响应速度。
创建流畅的动画。

例如，你可以使用以下代码来实现防抖：

function debounce(func, wait) {
  let timeout;
  return function () {
    const args = arguments;
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

const handleInput = (e) => {
  // 防抖处理
  const debouncedHandleInput = debounce(handleInput, 500);
  debouncedHandleInput(e);
};

在这个例子中，debounce 函数会返回一个可执行函数，这个可执行函数的作用域链上保存了定时器变量。当重复执行的时候，会先清空掉上次生成的定时器，从而实现延迟执行的效果。

requestAnimationFrame 与节流

将 requestAnimationFrame 与节流结合使用，可以实现以下效果：

减少不必要的函数调用。
提高页面的性能。
创建流畅的动画。

例如，你可以使用以下代码来实现节流：

function throttle(func, wait) {
  let lastCallTime = 0;
  return function () {
    const args = arguments;
    const context = this;
    const now = Date.now();
    if (now - lastCallTime >= wait) {
      func.apply(context, args);
      lastCallTime = now;
    }
  };
}

const handleScroll = (e) => {
  // 节流处理
  const throttledHandleScroll = throttle(handleScroll, 500);
  throttledHandleScroll(e);
};

在这个例子中，throttle 函数会返回一个可执行函数，这个可执行函数的作用域链上保存了上次执行的时间戳。当前时间戳和之前的时间戳相比较，如果超过约定时间，则执行。

结语

requestAnimationFrame、防抖和节流都是前端开发中常用的优化手段。它们可以有效减少不必要的函数调用，从而提升页面的响应速度和用户体验。本文介绍了 requestAnimationFrame 的工作原理、防抖和节流的概念，以及 requestAnimationFrame 与防抖、节流的结合使用。希望这些知识能够帮助你更好地优化你的前端项目，让你的项目更加高效和流畅。