节流和防抖

**节流（Throttle）和防抖（Debounce）**都是控制函数触发频率的技术，但侧重点和应用场景不同：

1. 防抖（Debounce）

定义：事件被触发后，等待一段时间（如 300ms），如果这段时间内没有再次触发，才执行一次函数。
作用：避免短时间内频繁触发，只执行最后一次。
应用场景：输入框实时搜索、窗口大小调整结束后触发、按钮防连击。

2. 节流（Throttle）

定义：限制函数在固定时间间隔内只能执行一次，无论触发多少次。
作用：均匀分配事件触发频率，保证一定时间内执行一定次数。
应用场景：滚动加载、监听滚动条滚动、窗口resize持续触发的场景。

3. 区别总结

维度	防抖（Debounce）	节流（Throttle）
触发时机	停止触发一定时间后执行	固定时间间隔执行
触发频率	只执行最后一次	固定间隔内执行多次（限频）
适用场景	输入框搜索、按钮防抖	滚动监听、游戏帧率控制

4. 简单比喻

防抖：你在说话，别人等你停下3秒才回应你。
节流：你讲话频率太快，别人每隔3秒只能回应一次。

// 防抖（Debounce）代码示例
function debounce(fn, delay = 300) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// 用法示例（输入框防抖搜索）
const onSearch = debounce(function (e) {
  console.log("搜索关键词：", e.target.value);
}, 500);

// 节流（Throttle）代码示例
function throttle(fn, delay = 300) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

// 用法示例（滚动监听节流）
window.addEventListener(
  "scroll",
  throttle(function () {
    console.log("滚动事件触发", Date.now());
  }, 500)
);

总结：

防抖：连续触发时只执行最后一次，适合输入等“等停止”场景。
节流：固定时间间隔执行，适合滚动、resize等高频事件控制。