如何实现 JavaScript 的防抖（debounce）函数？

我将实现一个 JavaScript 的防抖（debounce）函数，它常用于控制高频事件（如滚动、窗口调整或输入）的执行频率。防抖的作用是在某个事件被频繁触发时，延迟执行回调函数，仅当事件停止触发并超过指定的延迟时间后才真正执行回调。这是一个基础但重要的前端优化技巧。

核心实现代码及工作原理：

/**
 * 防抖函数实现
 * @param {Function} fn - 要延迟执行的目标函数
 * @param {number} delay - 延迟执行的时间，单位为毫秒（默认200ms）
 * @returns {Function} - 返回一个延迟版本的函数，可用于事件监听
 */
function debounce(fn, delay = 200) {
  // 使用闭包保存 timer
  let timer = null;
  
  // 返回一个新函数
  return function(...args) {
    // 如果有之前设置的定时器，清除它以确保重新计时
    if (timer) {
      clearTimeout(timer);
    }
    // 设置新定时器以延迟执行回调
    timer = setTimeout(() => {
      fn.apply(this, args); // 透传 this 上下文和函数参数
    }, delay);
  };
}

使用示例：

// 示例：输入框防抖验证
const inputEl = document.querySelector('input');
function validateInput() {
  console.log('Input value:', inputEl.value); // 执行真实逻辑（如表单验证或搜索请求）
}
// 绑定防抖处理事件到输入框的 input 事件
inputEl.addEventListener('input', debounce(validateInput, 1000)); // 延迟1秒执行验证

关键点解释：

• 作用：防抖避免因事件频繁触发导致的性能问题（如防止 AJAX 请求在每次输入变化时都执行），提升页面效率和响应体验。
• 优化考虑：如高级需求（例如支持首次是否立即执行），建议直接使用 Lodash 库的 _.debounce，支持更多配置（如 leading:true|false）。

对于其他工具函数实现：

• map 函数：array.map(fn) 接收一个函数处理每个元素返回新数组。
• throttle 函数：在固定间隔中最多执行一次，但防抖在一般场景更为实用，资源节省更优。