JavaScript 防抖与节流函数：优化高频事件性能的实用指南

以下是 JavaScript 中非常实用的两个函数示例，分别用于 防抖（debounce） 和 节流（throttle），它们能有效优化高频事件（如滚动、输入、窗口调整）的性能：

/**
 * 防抖函数 (Debounce)
 * 高频事件结束后 wait 毫秒才会执行一次函数
 * @param {Function} func 需要防抖的函数
 * @param {number} wait 等待时间（毫秒）
 * @param {boolean} immediate 是否立即执行
 * @returns {Function}
 */
function debounce(func, wait = 100, immediate = false) {
  let timeout;
  return function (...args) {
    const context = this;
    const later = () => {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

/**
 * 节流函数 (Throttle)
 * 高频事件中每 wait 毫秒最多执行一次函数
 * @param {Function} func 需要节流的函数
 * @param {number} wait 时间间隔（毫秒）
 * @returns {Function}
 */
function throttle(func, wait = 100) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= wait) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

使用场景示例

1. 防抖 - 搜索框输入建议

const searchInput = document.querySelector('#search');
searchInput.addEventListener('input', debounce(function(e) {
  console.log('发送搜索请求:', e.target.value);
}, 300));

2. 节流 - 滚动事件处理

window.addEventListener('scroll', throttle(function() {
  console.log('处理滚动逻辑');
}, 200));

核心区别

这两个函数能有效解决高频事件导致的性能问题，是前端开发中的经典工具函数。实际开发中可以将其放入项目工具库，配合 Lodash 的 _.debounce 和 _.throttle 使用效果更佳（但手写版本更轻量）。