JS 防抖节流技巧助力开发者应对事件纷扰

前端

2023-09-11 19:46:49

优雅解锁前端性能优化之「防抖」与「节流」

防抖

首先让我们来了解一下防抖。防抖（Debounce）的目的是防止函数被过度调用，减少不必要的函数执行次数，从而优化性能。它的原理是：当一个函数被连续多次触发时，在指定的时间内，只执行一次。

具体来说，防抖可以应用在以下场景：

搜索框 ：当用户在搜索框中输入内容时，我们不希望每次输入都触发搜索请求。我们可以使用防抖来控制搜索请求的触发频率，例如每 500 毫秒触发一次。
滚动加载 ：当用户滚动页面时，我们不希望每次滚动都触发加载更多数据的请求。我们可以使用防抖来控制加载请求的触发频率，例如每 1 秒触发一次。

节流

节流（Throttle）与防抖类似，但其目的是限制函数的执行频率，在一段时间内，函数只能执行一定次数。它的原理是：当一个函数被多次触发时，只执行第一次，然后在指定的时间间隔内禁止执行。

节流可以应用在以下场景：

按钮点击 ：当用户连续点击按钮时，我们不希望每次点击都触发操作。我们可以使用节流来限制按钮的点击频率，例如每 500 毫秒触发一次。
鼠标移动 ：当用户在页面上移动鼠标时，我们不希望每次移动都触发事件。我们可以使用节流来限制鼠标移动事件的触发频率，例如每 100 毫秒触发一次。

应用指南：防抖与节流在代码中的实现

在 JavaScript 中，我们可以使用以下两种方法实现防抖和节流：

防抖

function debounce(fn, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, delay);
  };
}

节流

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