JavaScript 防抖和节流

概念

防抖（Debounce）是指在事件触发后，只有在经过设定的时间间隔内没有再次触发，事件处理器才会执行。这样可以避免事件被频繁触发。

节流（Throttling）则是指在一定时间间隔内，事件处理器只执行一次。这样可以控制事件的执行频率。

实现

防抖实现：

function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);  // 清除之前的定时器
    timer = setTimeout(() => {
      func.apply(this, args);  // 在延迟后执行回调
    }, delay);
  };
}
 
// 使用例子：
const handleResize = debounce(() => {
  console.log('Window resized');
}, 300);
 
window.addEventListener('resize', handleResize);

节流实现：

function throttle(func, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastTime >= delay) {
      lastTime = now;
      func.apply(this, args);  // 在指定时间间隔内执行回调
    }
  };
}
 
// 使用例子：
const handleScroll = throttle(() => {
  console.log('Scroll event triggered');
}, 200);
 
window.addEventListener('scroll', handleScroll);

区别与相同点

防抖和节流都是针对频繁触发的事件，两次事件触发间隔（再次触发时间 now - 上次执行时间 lastTime）都大于等于一个指定值 delay，
区别在于防抖会不停重新计时，改变 lastTime，而节流则不会。

使用场景

防抖防止事件被频繁触发，减少不必要的事件次数，合并事件，只有最后一次生效。常见应用场景：

1. 输入框搜索建议，用户停止输入后再发送请求；
2. 调整窗口大小后重新计算布局；
3. 表单验证，输入停止后再进行验证；

节流控制事件执行频率，一段时间内最多执行一次事件。常见应用场景：

1. 滚动事件，如懒加载图片；
2. 页面点击操作统计；
3. 高频按钮点击防止多次触发；

第三方函数实现

实际项目中，我们常常使用第三方工具库，其中也有库实现了防抖和节流，如 Lodash 和 Underscore（Lodash 的前身）。

Lodash 实现

Lodash 提供 _.debounce()、_.throttle() 分别实现防抖和节流。

参数：

import _ from 'lodash';
 
const debounceFn = _.debounce(() => {
  func()
}, wait, option{?leading, ?trailing});
 
const throttleFn = _.throttle(() => {
  func()
}, wait, option{?leading, ?trailing});

• func: 要防抖的函数。
• wait: 延迟时间（毫秒）。
• options: 可选配置对象：
  • leading：是否在延迟开始前触发。
  • trailing：是否在延迟结束后触发。