如何优化防抖函数，避免重复创建定时器？

防抖函数基本概念

防抖函数(Debounce)是一种控制函数执行频率的技术，它确保函数在一定时间间隔内只执行一次，即使在这段时间内被多次调用。当事件被频繁触发时，防抖函数会合并多次调用为一次执行，从而提高性能并减少不必要的计算。

常见应用场景

• 搜索框输入验证（用户停止输入一段时间后才发起请求）
• 窗口大小调整事件处理（resize事件）
• 按钮点击防止重复提交
• 滚动事件处理（scroll事件）

传统防抖函数实现及问题

基本实现

function debounce(func, wait) {
  let timeout;
  
  return function() {
    const context = this;
    const args = arguments;
    
    // 每次调用都清除并重新创建定时器
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

存在的问题

1. 重复创建定时器：每次调用都会创建一个新的定时器，即使前一个定时器还未执行
2. 内存开销：频繁调用时，会创建大量定时器对象，增加内存压力
3. 执行时机不可控：无法控制函数是立即执行还是延迟执行
4. 缺少取消机制：没有提供主动取消待执行函数的方法
5. 无法获取返回值：无法获取被防抖函数的返回值

优化方案

1. 定时器复用优化

通过复用定时器变量，避免每次调用都创建新的定时器，这是最基本的优化方式。

function debounce(func, wait) {
  let timeout = null; // 初始化为null，而非undefined
  
  return function() {
    const context = this;
    const args = arguments;
    
    // 检查并复用定时器
    if (timeout) {
      clearTimeout(timeout);
    }
    
    timeout = setTimeout(() => {
      func.apply(context, args);
      timeout = null; // 执行后重置定时器
    }, wait);
  };
}

2. 添加取消机制

提供显式的取消方法，允许在不需要时清除定时器，避免内存泄漏。

function debounce(func, wait) {
  let timeout = null;
  
  function debounced(...args) {
    const context = this;
    
    if (timeout) {
      clearTimeout(timeout);
    }
    
    timeout = setTimeout(() => {
      func.apply(context, args);
      timeout = null;
    }, wait);
  }
  
  // 添加取消方法
  debounced.cancel = function() {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
  };
  
  return debounced;
}

// 使用示例
const debouncedFn = debounce(myFunction, 300);
debouncedFn(); // 调用防抖函数
debouncedFn.cancel(); // 取消待执行的函数

3. 立即执行选项

添加选项控制是否立即执行函数，提高灵活性。

function debounce(func, wait, immediate = false) {
  let timeout = null;
  
  return function() {
    const context = this;
    const args = arguments;
    
    const callNow = immediate && !timeout;
    
    if (timeout) {
      clearTimeout(timeout);
    }
    
    if (callNow) {
      func.apply(context, args);
    } else {
      timeout = setTimeout(() => {
        func.apply(context, args);
        timeout = null;
      }, wait);
    }
  };
}

4. 记忆返回值优化

缓存函数执行结果，避免重复计算，并允许获取返回值。

function debounce(func, wait, immediate = false) {
  let timeout = null;
  let result;
  
  function debounced(...args) {
    const context = this;
    
    const callNow = immediate && !timeout;
    
    if (timeout) {
      clearTimeout(timeout);
    }
    
    if (callNow) {
      result = func.apply(context, args);
      timeout = null;
    } else {
      timeout = setTimeout(() => {
        result = func.apply(context, args);
        timeout = null;
      }, wait);
    }
    
    return result;
  }
  
  debounced.cancel = function() {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
  };
  
  // 添加刷新方法，立即执行并重置定时器
  debounced.flush = function() {
    if (timeout) {
      clearTimeout(timeout);
      result = func.apply(this, arguments);
      timeout = null;
      return result;
    }
  };
  
  return debounced;
}

5. 高级优化 - 使用类实现

使用类封装防抖逻辑，提供更完整的API和更好的内存管理。

class Debouncer {
  constructor(func, wait = 300, immediate = false) {
    this.func = func;
    this.wait = wait;
    this.immediate = immediate;
    this.timeout = null;
    this.result = null;
    
    // 绑定this，确保回调中正确引用
    this.execute = this.execute.bind(this);
    this.debounced = this.debounced.bind(this);
  }
  
  execute(context, args) {
    this.result = this.func.apply(context, args);
    this.timeout = null;
    return this.result;
  }
  
  debounced(...args) {
    const context = this;
    
    const callNow = this.immediate && !this.timeout;
    
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
    
    if (callNow) {
      return this.execute(context, args);
    }
    
    this.timeout = setTimeout(() => {
      this.execute(context, args);
    }, this.wait);
    
    return this.result;
  }
  
  cancel() {
    if (this.timeout) {
      clearTimeout(this.timeout);
      this.timeout = null;
    }
  }
  
  flush() {
    if (this.timeout) {
      clearTimeout(this.timeout);
      return this.execute(this, arguments);
    }
  }
}

// 使用示例
const debouncer = new Debouncer(myFunction, 300);
const debouncedFn = debouncer.debounced;
debouncedFn(); // 调用防抖函数
debouncer.cancel(); // 取消待执行的函数

优化方案对比

最佳实践建议

1. 根据场景选择合适的优化方案：简单场景使用基础优化，复杂场景考虑类实现
2. 添加取消机制：几乎所有场景都应提供取消方法，避免内存泄漏
3. 考虑立即执行选项：根据业务需求决定是否支持立即执行
4. 处理返回值：当被防抖函数有返回值时，应考虑缓存和返回
5. 添加类型检查：在生产环境中，应添加参数类型检查，提高代码健壮性
6. 考虑使用现有库：如Lodash的_.debounce已经实现了完善的防抖功能