JS手写防抖

防抖

什么是防抖

• 频繁触发只执行最后一次

实现代码：

function debounce(func, wait) {
  let timeout; // 闭包变量，用于存储 setTimeout 返回的ID,保证每次调用共享同一个定时器状态
  
  // 返回一个新的函数，这个函数会在被调用时延迟执行传入的 func
  return function(...args) {  // 使用剩余参数收集所有参数，确保能传递任意数量的参数
    
    // 保存当前函数的执行上下文（this值）
    // 这是为了确保在 func 被调用时，this 指向正确
    const context = this;
    
    // 每次调用时，清除之前的定时器
    // 这样可以确保连续快速调用时，只有最后一次调用会真正执行
    clearTimeout(timeout);
    
    // 设置一个新的定时器，延迟 wait 毫秒后执行
    timeout = setTimeout(() => {
      // 方法1：使用 apply 执行原函数
      // apply 可以接收一个数组作为参数列表，适合这里的情况
      func.apply(context, args);
      
      // 或方法2：使用 call + 展开运算符
      // func.call(context, ...args); // 效果相同，但需要展开 args 数组
    }, wait);
  };
}