Javascript如何防抖和节流_怎样优化事件处理函数？_技术教程

防抖是事件连续触发时只执行最后一次，节流是固定间隔内最多执行一次；前者适用于搜索输入、resize等需“停止后响应”的场景，后者适用于scroll、拖拽等需“匀速响应”的场景。

防抖和节流是优化高频事件（如 resize、scroll、input、click）处理函数的核心手段，本质是控制函数执行频率：防抖让函数在连续触发后只执行最后一次，节流则保证函数按固定间隔至少执行一次。

防抖（Debounce）：等“停”了再执行

适用场景：用户输入搜索建议、窗口大小调整后重新布局。核心思路是每次触发时清除上一个定时器，重设新定时器。

简单实现：

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

使用示例：

const handleInput = debounce(() => {
  console.log('发起搜索请求');
}, 300);

inputElement.addEventListener('input', handleInput);

用户快速输入10个字符，只会在最后停顿300ms后执行一次
注意：闭包中保存的 timer 必须可被清除，否则会累积定时器
如需立即执行首次调用（leading edge），需额外加标志位逻辑

节流（Throttle）：固定节奏执行

适用场景：滚动监听加载更多、鼠标拖拽实时反馈。目标是限制单位时间内最多执行一次。

两种常见实现方式：

定时器版（推荐）：触发时若无活跃定时器，则执行并启动延时器；延时期间触发不执行，但可记录最新参数，延时结束后执行最后一次
时间戳版：记录上次执行时间，每次触发时比较当前时间与上次执行时间差，大于间隔才执行并更新时间戳

定时器版节流示例：

function throttle(fn, delay) {
  let timer = null;
  let lastArgs = null;
  return function(...args) {
    lastArgs = args;
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, lastArgs);
        timer = null;
        lastArgs = null;
      }, delay);
    }
  };
}

该版本兼顾响应性与平滑性，适合大多数滚动/拖拽场景。