防抖与节流函数的手写实现

在前端开发中，防抖(Debounce)和节流(Throttle)是两种常用的性能优化技术，用于控制函数的执行频率，特别是在处理频繁触发的事件如resize、scroll、input等场景中。

防抖函数(Debounce)

概念与原理

防抖函数的核心思想是：在事件被触发后，等待一定时间间隔后再执行函数，如果在这个时间间隔内事件再次被触发，则重新计时。这样可以确保函数只在用户停止操作后执行一次。

代码实现

/**
 * 防抖函数
 * @param {Function} fn 需要防抖的函数
 * @param {number} delay 延迟时间，单位毫秒
 * @param {boolean} immediate 是否立即执行
 * @return {Function} 防抖后的函数
 */
function debounce(fn, delay = 300, immediate = false) {
  let timer = null;
  let isInvoke = false;
  
  function _debounce(...args) {
    if (timer) clearTimeout(timer);
    
    if (immediate && !isInvoke) {
      fn.apply(this, args);
      isInvoke = true;
    } else {
      timer = setTimeout(() => {
        fn.apply(this, args);
        isInvoke = false;
        timer = null;
      }, delay);
    }
  }
  
  _debounce.cancel = function() {
    if (timer) clearTimeout(timer);
    timer = null;
    isInvoke = false;
  }
  
  return _debounce;
}

应用场景

• 搜索框输入联想：用户在输入过程中不频繁发送请求，只在停止输入后发送一次请求
• 按钮点击事件：防止用户多次快速点击导致重复提交
• 窗口resize事件：窗口调整结束后再执行相关操作

节流函数(Throttle)

概念与原理

节流函数的核心思想是：在一定时间间隔内只执行一次函数，无论这个时间间隔内事件触发了多少次。这样可以确保函数以固定的频率执行。

代码实现

/**
 * 节流函数
 * @param {Function} fn 需要节流的函数
 * @param {number} interval 时间间隔，单位毫秒
 * @param {Object} options 配置项
 * @param {boolean} options.leading 是否在开始时立即执行
 * @param {boolean} options.trailing 是否在结束时执行最后一次
 * @return {Function} 节流后的函数
 */
function throttle(fn, interval = 300, options = { leading: true, trailing: true }) {
  let timer = null;
  let lastTime = 0;
  const { leading, trailing } = options;
  
  function _throttle(...args) {
    const nowTime = Date.now();
    
    // 首次执行或不立即执行的情况
    if (!lastTime && !leading) lastTime = nowTime;
    
    const remainTime = interval - (nowTime - lastTime);
    
    if (remainTime <= 0) {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      
      fn.apply(this, args);
      lastTime = nowTime;
      return;
    }
    
    if (trailing && !timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null;
        lastTime = leading ? Date.now() : 0;
      }, remainTime);
    }
  }
  
  _throttle.cancel = function() {
    if (timer) clearTimeout(timer);
    timer = null;
    lastTime = 0;
  }
  
  return _throttle;
}

应用场景

• 页面滚动事件：控制滚动事件的触发频率，提高性能
• 鼠标移动事件：如拖拽、跟随效果等
• 播放进度条：定期更新播放进度
• 高频点击事件：限制点击频率

防抖与节流的对比

使用示例

// 防抖示例：搜索框输入联想
const searchInput = document.getElementById('search');
const searchDebounce = debounce(function(e) {
  console.log('发送搜索请求:', e.target.value);
  // 实际项目中这里可能是API请求
}, 500);

searchInput.addEventListener('input', searchDebounce);

// 节流示例：页面滚动事件
const scrollThrottle = throttle(function() {
  console.log('页面滚动位置:', window.scrollY);
  // 实际项目中这里可能是加载更多内容或更新UI
}, 200);

window.addEventListener('scroll', scrollThrottle);

防抖与节流的可视化理解

实现细节解析

防抖函数实现要点

1. 使用闭包保存计时器：确保每次调用的是同一个计时器
2. 清除之前的计时器：每次触发事件时清除之前的计时器，重新计时
3. 立即执行选项：通过immediate参数控制是否在第一次触发时立即执行
4. 取消功能：提供cancel方法可以取消待执行的防抖函数

节流函数实现要点

1. 时间戳判断：通过记录上一次执行的时间戳，判断是否达到执行间隔
2. 计时器补充：对于最后一次触发，使用计时器确保执行
3. 首尾执行控制：通过leading和trailing参数控制是否在开始和结束时执行
4. 取消功能：提供cancel方法可以取消待执行的节流函数

进阶实现：结合requestAnimationFrame

对于动画相关的场景，可以使用requestAnimationFrame实现更高效的节流函数：

function rafThrottle(fn) {
  let locked = false;
  
  return function(...args) {
    if (locked) return;
    
    locked = true;
    requestAnimationFrame(() => {
      fn.apply(this, args);
      locked = false;
    });
  };
}

// 使用示例
const moveThrottle = rafThrottle(function(e) {
  console.log('鼠标移动:', e.clientX, e.clientY);
});

document.addEventListener('mousemove', moveThrottle);

总结

防抖和节流是前端性能优化的重要手段，它们通过控制函数执行频率来提高应用性能。防抖适合"只关心结果"的场景，如搜索联想；节流适合"关心过程"的场景，如滚动加载。理解它们的原理和实现方式，能够帮助我们在实际开发中做出正确的选择。

参考资料

• MDN: Performance optimization
• JavaScript Debounce Function
• Throttling Function Calls
• Understanding Debounce and Throttle