前端优化之节流(throttle)与防抖(debounce)

在前端开发中，节流（Throttle）和防抖（Debounce）是两种重要的性能优化技术，用于控制高频触发的事件处理函数，避免浏览器过度执行导致的卡顿或资源浪费。以下是对这两种技术的详细解析：

一、基本概念

1. 节流（Throttle）

• 定义：在一定时间间隔内，只执行一次函数。
• 适用场景：滚动加载、按钮点击限流、窗口 resize 等高频触发场景。

2. 防抖（Debounce）

• 定义：在事件触发后，等待一段时间再执行函数。如果在等待期间再次触发事件，则重新计时。
• 适用场景：搜索框联想、输入验证、窗口滚动结束后的操作等。

二、实现原理

1. 节流的实现

通过定时器或时间戳控制函数执行频率：

// 时间戳实现（立即执行）
function throttle(func, wait) {
  let previous = 0;
  return function(...args) {
    const now = Date.now();
    if (now - previous > wait) {
      func.apply(this, args);
      previous = now;
    }
  };
}

// 定时器实现（延迟执行）
function throttle(func, wait) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, wait);
    }
  };
}

 

2. 防抖的实现

通过清除和重新设置定时器实现延迟执行：

// 基础防抖
function debounce(func, wait) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

// 带立即执行选项的防抖
function debounce(func, wait, immediate = false) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    
    if (immediate) {
      const callNow = !timer;
      timer = setTimeout(() => {
        timer = null;
      }, wait);
      if (callNow) func.apply(this, args);
    } else {
      timer = setTimeout(() => {
        func.apply(this, args);
      }, wait);
    }
  };
}

三、核心区别对比

特性	节流（Throttle）	防抖（Debounce）
执行频率	固定间隔执行一次	只在停止触发后执行一次
响应速度	即时响应（时间戳版）或延迟响应（定时器版）	延迟响应
应用场景	滚动加载、高频点击、窗口 resize	搜索联想、输入验证、滚动结束操作
实现关键	控制执行间隔	清除并重置定时器

四、实际应用示例

1. 节流示例：滚动加载更多

// HTML
<div id="container" style="height: 500px; overflow: auto;">
  <!-- 内容 -->
</div>

// JavaScript
const container = document.getElementById('container');
container.addEventListener('scroll', throttle(loadMoreData, 300));

function loadMoreData() {
  // 检查是否滚动到底部
  if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
    // 加载更多数据
    console.log('加载更多...');
  }
}

2. 防抖示例：搜索联想

// HTML
<input type="text" id="searchInput" placeholder="搜索...">

// JavaScript
const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('input', debounce(fetchSuggestions, 300));

function fetchSuggestions(e) {
  const query = e.target.value;
  if (query.length < 2) return;
  
  // 发送请求获取联想词
  console.log(`搜索: ${query}`);
  // fetch(`/api/suggestions?q=${query}`)...
}

六、注意事项

1. 选择合适的策略：

   • 需要保证一定频率执行：使用节流
   • 需要避免重复执行：使用防抖

2. 性能考量：

   • 防抖的等待时间不宜过长，否则会影响用户体验
   • 节流的间隔时间需要根据场景调整
3. 取消功能：

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

掌握节流和防抖能有效提升前端应用的性能和用户体验，特别是在处理高频触发的事件时。根据具体场景选择合适的实现方式，并注意参数调优是关键。