JavaScript防抖节流实现_javascript性能优化

幻影之瞳 2025-12-05 00:00:00 次阅读

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

在前端开发中，用户频繁触发事件（如窗口滚动、输入框输入、按钮点击）容易导致性能问题。为优化这类场景，防抖（Debounce）和节流（Throttle）是两种常用的函数控制手段。

防抖（Debounce）：只执行最后一次

防抖的核心思想是：当事件被触发时，设置一个定时器，若在规定时间内事件再次被触发，则清除原定时器并重新计时。只有当事件停止触发超过设定时间后，才会真正执行函数。

适用于搜索框输入建议、窗口大小调整、表单验证等只需响应“最终操作”的场景。

示例实现：

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

使用方式：

const searchHandler = debounce((query) => {
console.log('搜索:', query);
}, 300);

// 每次输入都会重置计时
inputElement.addEventListener('input', (e) => searchHandler(e.target.value));

节流（Throttle）：固定时间执行一次

节流的策略是：无论事件触发多频繁，函数在指定时间间隔内最多执行一次。比如每100ms只能执行一次处理函数。

适合用于监听页面滚动、鼠标移动、按钮高频点击等需要“匀速响应”的场景。

示例实现：

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