防抖节流技巧，提升JS性能方法

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《防抖与节流：JavaScript性能优化技巧》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

防抖指事件频繁触发时仅执行最后一次，适用于搜索联想等场景；节流则保证在固定时间间隔内最多执行一次，适合滚动监听等连续操作，两者均通过降低函数执行频率提升性能。

在前端开发中，JavaScript的性能优化是一个不可忽视的话题。特别是在处理高频触发事件时，比如窗口滚动、输入框输入、鼠标移动等，如果不加以控制，很容易造成页面卡顿甚至崩溃。防抖（Debounce）和节流（Throttle）是两种常用的优化手段，能有效减少函数执行次数，提升应用性能。

什么是防抖（Debounce）

防抖的核心思想是：当事件被频繁触发时，只执行最后一次操作。也就是说，只要事件持续触发，函数的执行就会被不断推迟，直到事件停止触发一段时间后才真正执行一次。

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

实现方式：

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

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

什么是节流（Throttle）

节流的策略是：在一定时间间隔内，无论事件触发多少次，函数最多只执行一次。可以理解为“稀释”函数的执行频率。

常用于监听页面滚动、鼠标移动、窗口resize等连续触发但不需要每次都响应的场景。

实现方式（定时器版本）：

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

也可以使用时间戳方式实现，逻辑略有不同但效果类似。

防抖与节流的区别

虽然两者都用于限制函数执行频率，但适用场景和行为有明显差异：

• 防抖：适合用户操作结束后再执行，比如输入完成后再发起请求，强调“最后的结果”。
• 节流：适合规律性地执行，比如每100ms更新一次位置，强调“过程中的均匀执行”。
• 防抖可能一次都不执行（如果一直触发），节流至少会按间隔执行一次。

实际使用建议

选择防抖还是节流，关键看业务需求：

• 输入搜索建议 → 用防抖，避免频繁请求接口。
• 无限滚动加载 → 用节流，防止滚动时频繁检查是否触底。
• 按钮提交防重复 → 用防抖或节流都可以，但更推荐使用状态锁或Promise控制。

现代框架中，也可以借助Lodash等工具库提供的 _.debounce 和 _.throttle 方法，减少重复造轮子。

基本上就这些，掌握防抖和节流的原理与使用，能显著提升交互体验和运行效率。不复杂但容易忽略细节，值得每个前端开发者熟练掌握。

理论要掌握，实操不能落！以上关于《防抖节流技巧，提升JS性能方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！