防抖和节流的区别与实现原理

引言

防抖（Debounce）和节流（Throttle）是JavaScript中两种常用的控制函数执行频率的技术，主要用于优化性能，避免因频繁触发事件（如resize、scroll、input、mousemove等）导致的性能问题。虽然它们的目的相似，但实现原理和应用场景有所不同。

防抖（Debounce）

定义与原理

防抖技术确保函数在一定时间内连续触发后，只执行最后一次。其核心原理是：当事件被触发后，等待一段指定的时间（例如300ms），如果在这段时间内事件再次被触发，则重新计时。只有当事件停止触发并等待了指定时间后，函数才会执行。

应用场景

防抖适用于只需要关心最终状态的场景，例如：

• 搜索框输入联想：用户输入过程中不发送请求，停止输入后才发送请求
• 文本输入验证：用户完成输入后再进行验证
• 按钮防重复点击：防止用户快速多次点击按钮导致重复提交
• 窗口resize事件：窗口调整大小完成后才执行相关操作

实现代码

// 简单版防抖实现
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

// 立即执行版防抖实现
function debounce(func, wait, immediate) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    const later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

节流（Throttle）

定义与原理

节流技术确保函数在一定时间内只执行一次，无论在这段时间内事件触发了多少次。其核心原理是：当事件被触发后，立即执行函数，然后在指定的时间间隔内忽略所有后续触发，直到时间间隔结束。

应用场景

节流适用于需要限制执行频率的场景，例如：

• 滚动事件：控制滚动事件的触发频率
• 鼠标移动事件：减少mousemove事件的触发次数
• 按钮点击限制：限制按钮的点击频率
• 轮播图切换：控制轮播图切换的频率
• 动画帧率控制：控制动画的刷新率

实现代码

// 时间戳版节流实现
function throttle(func, wait) {
  let previous = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - previous > wait) {
      func.apply(context, args);
      previous = now;
    }
  };
}

// 定时器版节流实现
function throttle(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(context, args);
        timeout = null;
      }, wait);
    }
  };
}

// 结合时间戳和定时器的节流实现（推荐）
function throttle(func, wait) {
  let timeout = null;
  let previous = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now();
    const remaining = wait - (now - previous);
    
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      func.apply(context, args);
      previous = now;
    } else if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(context, args);
        previous = Date.now();
        timeout = null;
      }, remaining);
    }
  };
}

防抖与节流的对比

实际应用示例

搜索框输入联想（防抖）

// 获取DOM元素
const searchInput = document.getElementById('search-input');
const suggestionBox = document.getElementById('suggestion-box');

// 定义搜索函数
function searchSuggestions(query) {
  // 这里可以发送AJAX请求获取搜索建议
  console.log(`Searching for: ${query}`);
  // 模拟AJAX请求
  fetch(`/api/suggestions?q=${query}`)
    .then(response => response.json())
    .then(data => {
      // 更新建议框内容
      suggestionBox.innerHTML = data.suggestions.map(s => `<div>${s}</div>`).join('');
    });
}

// 应用防抖，300ms内只执行最后一次搜索
const debouncedSearch = debounce(searchSuggestions, 300);

// 绑定输入事件
searchInput.addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

滚动事件处理（节流）

// 获取DOM元素
const scrollContainer = document.getElementById('scroll-container');
const scrollIndicator = document.getElementById('scroll-indicator');

// 定义滚动处理函数
function handleScroll() {
  const scrollTop = scrollContainer.scrollTop;
  const scrollHeight = scrollContainer.scrollHeight;
  const clientHeight = scrollContainer.clientHeight;
  const scrollPercentage = (scrollTop / (scrollHeight - clientHeight)) * 100;
  
  // 更新滚动指示器
  scrollIndicator.style.width = `${scrollPercentage}%`;
  
  // 检查是否滚动到底部
  if (scrollPercentage > 90) {
    console.log('Near the bottom! Load more content.');
    // 这里可以加载更多内容
  }
}

// 应用节流，每100ms最多执行一次
const throttledScroll = throttle(handleScroll, 100);

// 绑定滚动事件
scrollContainer.addEventListener('scroll', throttledScroll);

总结

防抖和节流都是优化性能的有效手段，但它们解决的问题略有不同：

• 防抖：适合用于只需关心最终结果的场景，如搜索框输入联想、表单验证等。它确保函数只在用户停止操作后执行一次，减少不必要的请求和计算。

• 节流：适合用于需要持续反馈但又要限制频率的场景，如滚动事件、鼠标移动等。它确保函数以固定的频率执行，提供流畅的用户体验。

在实际开发中，根据具体需求选择合适的策略，可以显著提升应用性能和用户体验。