防抖节流原理与JS优化技巧

防抖与节流是前端性能优化中应对高频事件（如输入、滚动、鼠标移动）的两大核心策略：防抖通过延迟执行并仅响应最后一次操作，完美适配搜索框输入等“结果导向”场景；节流则确保函数在固定时间间隔内至少执行一次，适用于滚动监听等需规律响应的持续性事件——二者虽目标一致，却在执行逻辑、适用场景和细节实现（如定时器清理、this绑定、立即执行支持）上各具精妙，掌握其原理不仅能显著提升页面流畅度与用户体验，还能让你轻松手写轻量可靠的优化函数，为工程实践打下坚实基础。

在前端开发中，频繁触发的事件如窗口滚动、输入框输入、鼠标移动等，容易导致性能问题。为了解决这类问题，防抖（Debounce）和节流（Throttle）是两种常用的优化手段。它们通过控制函数执行频率，减少不必要的调用，从而提升页面性能。

防抖函数原理与实现

防抖的核心思想是：当事件被频繁触发时，只执行最后一次操作。如果在等待时间内再次触发，则重新计时。

举个例子，用户在搜索框连续输入时，我们不希望每次按键都发起请求，而是等待用户停止输入一段时间后再执行搜索。这时就可以使用防抖。

防抖实现方式：

利用 setTimeout 延迟执行函数，并在每次触发时清除之前的定时器，只有最后一次触发能真正执行。

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));

上述代码中，只有当用户停止输入300毫秒后，才会触发搜索操作。

节流函数原理与实现

节流的核心思想是：规定一个函数在一定时间间隔内最多只能执行一次。即使事件持续触发，函数也不会超过这个频率执行。

比如监听页面滚动事件，我们可能只需要每100毫秒更新一次位置信息，而不是每一次滚动都响应。

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

通过记录上次执行时间，判断当前时间是否超过了设定间隔，决定是否执行函数。

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

使用示例：

window.addEventListener('scroll', throttle(function () {
  console.log('页面滚动了');
}, 100));

这样，无论滚动多快，函数每100毫秒最多执行一次。

防抖与节流的区别总结

• 防抖：适合“最后一次才重要”的场景，如搜索建议、按钮重复点击防护。
• 节流：适合“规律性执行”的场景，如滚动监听、窗口 resize、鼠标移动等高频事件。
• 防抖可能完全不执行中间状态，节流则会定期执行，保证响应频率。

实际应用中的注意事项

在真实项目中，可以结合框架或工具库使用更完善的实现，例如 Lodash 提供了 _.debounce 和 _.throttle 方法，支持额外配置如立即执行、取消等。

同时注意 this 指向和参数传递的正确性，在封装时使用 apply 或 call 绑定上下文。

基本上就这些。掌握防抖和节流，不仅能优化性能，还能提升用户体验。理解原理后，手写一个轻量版本并不复杂，但容易忽略细节，比如定时器清理、this 指向、立即执行需求等。

到这里，我们也就讲完了《防抖节流原理与JS优化技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！