Lodash的防抖和节流有什么区别？分别适用于什么场景？ - 面试题

Lodash的防抖（debounce）和节流（throttle）是两个非常重要的性能优化函数，它们用于控制函数的执行频率。以下是详细解答：

防抖（Debounce）

什么是防抖？

防抖是指在事件被触发后，延迟一段时间再执行函数。如果在这段延迟时间内，事件又被触发，则重新计时。只有当事件停止触发并经过指定的延迟时间后，函数才会执行。

防抖的应用场景

搜索框输入：用户停止输入后才发送搜索请求
窗口resize：窗口调整大小停止后才重新计算布局
表单验证：用户停止输入后才进行验证
按钮点击：防止用户快速多次点击

防抖的实现原理

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

// 使用示例
const debouncedSearch = debounce(function(keyword) {
  console.log('搜索:', keyword);
}, 300);

// 快速输入，只会在停止输入300ms后执行一次
debouncedSearch('a');
debouncedSearch('ab');
debouncedSearch('abc');

Lodash防抖的使用

javascript
import _ from 'lodash';

// 基本用法
const debouncedFn = _.debounce(function() {
  console.log('执行了');
}, 300);

// 立即执行选项
const debouncedImmediate = _.debounce(function() {
  console.log('立即执行');
}, 300, { leading: true, trailing: false });

// 取消防抖
const debounced = _.debounce(function() {
  console.log('执行');
}, 300);
debounced();
debounced.cancel(); // 取消执行

节流（Throttle）

什么是节流？

节流是指在指定的时间间隔内，函数最多执行一次。无论事件触发多少次，函数都会按照固定的时间间隔执行。

节流的应用场景

滚动事件：滚动时按固定频率触发
鼠标移动：限制mousemove事件的触发频率
动画帧：控制动画的更新频率
网络请求：限制API调用频率

节流的实现原理

javascript
// 简单的节流实现
function throttle(func, wait) {
  let timeout;
  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;
    } else {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        func.apply(context, args);
        previous = Date.now();
      }, wait - (now - previous));
    }
  };
}

// 使用示例
const throttledScroll = throttle(function() {
  console.log('滚动位置:', window.scrollY);
}, 100);

// 滚动时，最多每100ms执行一次
window.addEventListener('scroll', throttledScroll);

Lodash节流的使用

javascript
import _ from 'lodash';

// 基本用法
const throttledFn = _.throttle(function() {
  console.log('执行了');
}, 100);

// 立即执行选项
const throttledImmediate = _.throttle(function() {
  console.log('立即执行');
}, 100, { leading: true, trailing: false });

// 取消节流
const throttled = _.throttle(function() {
  console.log('执行');
}, 100);
throttled();
throttled.cancel(); // 取消执行

防抖与节流的区别

特性	防抖（Debounce）	节流（Throttle）
执行时机	事件停止触发后执行	按固定时间间隔执行
执行次数	只执行一次	可能执行多次
适用场景	搜索、表单验证	滚动、动画
延迟特性	每次触发都重新计时	固定时间间隔

图解对比

shell
防抖：
触发: ●●●●●●●●●●
执行:                 ●

节流：
触发: ●●●●●●●●●●
执行: ●    ●    ●    ●

实际应用示例

搜索框防抖

javascript
import _ from 'lodash';

class SearchComponent {
  constructor() {
    this.searchInput = document.getElementById('search-input');
    this.debouncedSearch = _.debounce(this.performSearch.bind(this), 300);
    this.searchInput.addEventListener('input', this.handleInput.bind(this));
  }

  handleInput(event) {
    const keyword = event.target.value;
    this.debouncedSearch(keyword);
  }

  performSearch(keyword) {
    console.log('执行搜索:', keyword);
    // 发送API请求
  }
}

滚动节流

javascript
import _ from 'lodash';

class ScrollHandler {
  constructor() {
    this.throttledScroll = _.throttle(this.handleScroll.bind(this), 100);
    window.addEventListener('scroll', this.throttledScroll);
  }

  handleScroll() {
    const scrollTop = window.scrollY;
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;

    // 检查是否滚动到底部
    if (scrollTop + windowHeight >= documentHeight - 100) {
      this.loadMoreContent();
    }
  }

  loadMoreContent() {
    console.log('加载更多内容');
    // 加载更多数据的逻辑
  }
}

性能优化建议

合理设置延迟时间：
- 防抖：通常设置为300-500ms
- 节流：通常设置为100-200ms

及时清理：

javascript
// 在组件卸载时取消
componentWillUnmount() {
  this.debouncedFn.cancel();
  this.throttledFn.cancel();
}

根据场景选择：
- 需要等待用户操作完成 → 使用防抖
- 需要持续响应但限制频率 → 使用节流

总结

防抖和节流都是重要的性能优化手段：

防抖适用于需要等待用户操作完成的场景，如搜索、表单验证
节流适用于需要持续响应但限制频率的场景，如滚动、动画
合理使用这两个函数可以显著提升应用性能，减少不必要的计算和网络请求
Lodash提供了完善的实现，支持多种配置选项，建议直接使用Lodash的版本