JS防抖节流实现_性能优化实战-js教程-PHP中文网

JS防抖节流实现_性能优化实战

幻影之瞳

发布： 2025-11-17 21:47:14

原创

244人浏览过

防抖通过延迟执行并重置定时器确保事件停止后仅执行一次，适用于搜索输入等场景；节流则通过时间间隔控制频率，保证周期性执行，适合滚动监听、按钮防抖等高频事件优化。

js防抖节流实现_性能优化实战

在前端开发中，频繁触发事件（如窗口滚动、输入框输入、鼠标移动）会带来性能问题。防抖（Debounce）和节流（Throttle）是两种常用的优化手段，用于控制函数执行频率，减少资源消耗。

防抖：只执行最后一次操作

防抖的核心思想是：当事件被触发后，设置一个延迟，如果在这段时间内事件再次被触发，则重新计时，直到某次触发后延迟时间内没有新触发，才真正执行函数。

适用于搜索框输入联想、窗口大小调整后重新渲染等场景。

实现方式：

使用 setTimeout 和 clearTimeout 控制延迟执行。

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

登录后复制

使用示例：

```javascript const searchInput = document.getElementById('search'); searchInput.addEventListener('input', debounce(function (e) { console.log('搜索:', e.target.value); }, 300)); ```

这样，用户输入停止300毫秒后才会发起请求，避免每次输入都调用接口。

节流：固定时间执行一次

节流的策略是：无论事件触发多频繁，函数在指定时间间隔内最多执行一次。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

适合处理高频事件如页面滚动、鼠标移动、按钮点击防重复提交等。

实现方式（时间戳版本）：

function throttle(func, delay) {
  let previous = 0;
  return function (...args) {
    const now = Date.now();
    const context = this;
    if (now - previous >= delay) {
      func.apply(context, args);
      previous = now;
    }
  };
}

登录后复制

定时器版本（更平滑）：

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

登录后复制

使用示例：

```javascript window.addEventListener('scroll', throttle(() => { console.log('页面滚动'); }, 100)); ```

每100毫秒最多输出一次“页面滚动”，防止事件回调过于密集。