前端优雅实现防抖和节流的几种方法示例-牛翰网

引言

在Web前端开发中，我们常常会遇到需要限制函数执行频率的场景。比如，在用户快速连续点击按钮、窗口调整大小、滚动页面或者输入框文本变化时，如果不对这些事件进行处理，可能会导致过多不必要的计算或请求，从而影响用户体验甚至造成性能问题。为了解决这些问题，我们可以使用防抖（Debouncing）和节流（Throttling）这两种技术来优化代码的响应方式。

防抖与节流的基本概念和作用

防抖

防抖指的是将多次触发的事件合并为一次执行。它适用于那些我们只关心最后一次触发的场景，例如搜索框中的自动补全功能，我们只需要在用户停止输入后发送一次请求获取结果，而不是每次输入一个字符都发送请求。这样可以减少服务器的压力，同时提高应用的响应速度。

节流

节流则是指在一段时间内，不论触发了多少次事件，只会执行一次相应的操作。这在一些高频事件如滚动、窗口大小改变等场景下非常有用，通过限制事件处理函数的执行频率，可以避免因过于频繁的操作而导致的性能下降。

实现防抖

示例一：基础防抖实现

下面是一个简单的防抖函数实现，用于延迟执行函数，直到触发动作结束后等待指定的时间间隔再执行：

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

// 使用示例
const inputHandler = debounce((event) => {
  console.log('Input value:', event.target.value);
}, 300);

document.getElementById('search').addEventListener('input', inputHandler);

示例二：带立即执行选项的防抖

有时候我们希望在第一次触发事件时立即执行函数，之后的行为按照正常的防抖逻辑处理。可以通过添加一个立即执行的标志位来实现这个需求：

function debounce(func, wait, immediate) {
  let timeout;
  return function(...args) {
    const context = this;
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      // 如果是立即执行，并且没有定时器，则直接调用函数
      const callNow = !timeout;
      timeout = setTimeout(() => timeout = null, wait);
      if (callNow) func.apply(context, args);
    } else {
      timeout = setTimeout(() => func.apply(context, args), wait);
    }
  };
}

// 使用示例
const resizeHandler = debounce(function() {
  console.log('Window resized');
}, 200, true); // 立即执行一次，后续按照防抖逻辑

window.addEventListener('resize', resizeHandler);

实现节流

示例三：时间戳版节流

时间戳版本的节流是基于上一次执行时间和当前时间差来进行判断是否应该执行函数的：

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// 使用示例
const scrollHandler = throttle(() => {
  console.log('Scrolled');
}, 1000); // 每秒最多执行一次

window.addEventListener('scroll', scrollHandler);

示例四：定时器版节流

另一种常见的节流实现方法是使用定时器，这种方式会在设定的时间间隔内阻止函数被重复调用：

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

// 使用示例
const clickHandler = throttle(() => {
  console.log('Button clicked');
}, 500); // 每500毫秒最多执行一次

document.getElementById('myButton').addEventListener('click', clickHandler);

示例五：高级节流与防抖结合

有时候我们需要根据具体情况灵活运用节流和防抖。例如，对于无限滚动加载更多内容的场景，我们可以在用户接近页面底部时开始节流，而在用户完全停止滚动后利用防抖机制来发起加载新数据的请求：

function loadMoreData() {
  console.log('Loading more data...');
  // 模拟加载数据
}

let isFetching = false;

function handleScroll() {
  if (isFetching) return;
  
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  if (scrollTop + clientHeight >= scrollHeight - 50) {
    isFetching = true;
    // 结合节流和防抖
    const throttledAndDebouncedLoad = throttle(debounce(loadMoreData, 300), 1000);
    throttledAndDebouncedLoad();
  }
}

window.addEventListener('scroll', handleScroll);