Javascript如何实现防抖与节流？

防抖是最后一次触发后延迟执行，节流是固定间隔内最多执行一次；防抖适用于搜索输入等需等待操作结束的场景，节流适用于滚动监听等需稳定采样节奏的场景。

防抖和节流是前端处理高频事件（比如 resize、scroll、input）的两个核心优化手段，目的都是减少函数实际执行次数，但逻辑不同：防抖是“等你停了再执行”，节流是“固定频率执行”。

防抖（Debounce）：最后一次触发后延迟执行

适用于搜索框输入联想、窗口大小调整后重新布局等场景——用户连续操作时，只响应最后那次。

关键点：每次触发都清除之前的定时器，重新设置新定时器。

• 用 setTimeout + clearTimeout 实现
• 支持立即执行模式（首次触发立刻运行，后续触发按规则等待）
• 注意 this 和参数的正确传递

基础实现：

立即学习“Java免费学习笔记（深入）”；

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

节流（Throttle）：固定间隔内最多执行一次

适合滚动监听、鼠标拖拽等需要持续反馈但不必每帧都处理的场景——像“每隔 100ms 最多执行一次”。

关键点：区分“定时器控制”和“时间戳控制”两种主流写法，前者更常用且易于理解。

• 定时器版：用 setTimeout 控制是否处于“冷却中”
• 时间戳版：记录上一次执行时间，当前时间减去它大于等待时间才执行
• 两者在首次/末次触发行为上略有差异，可根据需求选择

定时器版节流示例：

标签： react javascript java 前端 app 联想 ai