节流阀使你的代码更丝滑，从此不再"卡顿"

前端

2023-09-17 17:45:42

节流函数，一个前端项目必备的基本函数，你真的用对了吗？带着这个疑问，我深入研究了一下，发现自己的确用的不太对。

节流函数的概念

节流函数，顾名思义，就像节流阀一样均匀的执行，把密集的重复调用，通过设置定时器，使函数在固定的间隔时间调用，在一段时间内，等时间间隔的调用多次，这种方式叫做节流。

节流函数的实际应用场景

在实际开发中，有很多场景需要用到节流函数，比如：

窗口变化事件处理： 在窗口大小变化时，我们需要对一些元素进行重新布局，但是如果窗口变化太频繁，就会导致布局也频繁变化，从而影响性能。这时，我们可以使用节流函数来控制布局更新的频率，只在窗口变化停止一定时间后才进行布局更新。
滚动事件处理： 在滚动页面时，我们需要对一些元素进行一些动画效果，但是如果滚动太频繁，就会导致动画效果也频繁触发，从而影响性能。这时，我们可以使用节流函数来控制动画效果的触发频率，只在滚动停止一定时间后才触发动画效果。
点击事件处理： 在点击按钮时，我们需要对一些数据进行提交，但是如果点击太频繁，就会导致数据提交也频繁发生，从而影响性能。这时，我们可以使用节流函数来控制数据提交的频率，只在点击停止一定时间后才提交数据。

节流函数的实现

节流函数的实现非常简单，只需要使用一个定时器即可。当函数被调用时，我们先检查定时器是否已经启动，如果已经启动，则直接返回。否则，我们启动定时器，并在定时器回调函数中执行函数。

function throttle(fn, delay) {
  let timer = null;
  return function () {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = null;
    }, delay);
  };
}

节流函数的使用

在实际开发中，我们可以使用节流函数来控制各种事件的触发频率，从而提高性能。例如，我们可以使用节流函数来控制窗口变化事件、滚动事件和点击事件的触发频率。

// 监听窗口变化事件
window.addEventListener('resize', throttle(function () {
  // 这里执行窗口变化时需要执行的代码
}, 200));

// 监听滚动事件
window.addEventListener('scroll', throttle(function () {
  // 这里执行滚动时需要执行的代码
}, 200));

// 监听点击事件
document.getElementById('btn').addEventListener('click', throttle(function () {
  // 这里执行点击时需要执行的代码
}, 200));