当前位置：首页 > 文章列表 > 文章 > 前端 > 防抖节流实战技巧分享

防抖节流实战技巧分享

2025-12-10 23:24:34 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

一分耕耘，一分收获！既然都打开这篇《防抖节流实战：JavaScript性能优化技巧》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

防抖和节流是前端优化高频事件的两种手段：防抖通过延迟执行，仅在事件停止触发后执行一次，适用于搜索输入等场景；节流则保证在指定时间间隔内最多执行一次，适合滚动监听等频繁操作。两者核心区别在于执行时机与频率控制，合理选择可提升性能与用户体验。

JavaScript防抖节流_性能优化实战方案

在前端开发中，频繁触发事件（如窗口滚动、输入框输入、鼠标移动）容易导致性能问题。JavaScript中的防抖（Debounce）和节流（Throttle）是两种常用的优化手段，能有效控制函数执行频率，提升页面响应速度与用户体验。

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

防抖的核心思想是：当事件被触发后，设置一个延迟定时器；如果在延迟时间内事件再次触发，则清除旧定时器并重新计时。只有在连续触发停止一段时间后，才会真正执行目标函数。

适用于搜索框输入联想、窗口大小调整、按钮重复点击等场景。

示例代码：

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

// 使用示例
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function (e) {
  console.log('搜索关键词:', e.target.value);
}, 300));

上面的实现确保用户停止输入300毫秒后才发起请求，避免每打一个字就请求一次接口。

节流：固定时间间隔执行一次

节流是指在一定时间间隔内，无论事件触发多少次，函数最多只执行一次。常见实现方式有定时器法和时间戳法。

适合处理高频事件如滚动、拖拽、鼠标移动等，防止函数过度执行。

定时器实现方式：

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

// 使用示例
window.addEventListener('scroll', throttle(() => {
  console.log('页面滚动中...');
}, 100));

该方案保证每100ms最多执行一次回调，减少性能开销。