前端防抖与节流实战：主流库选择与避坑指南

看到没？lodash 的 options 配置丰富到变态，leading、trailing、maxWait 这三个参数组合起来，能覆盖 99% 的业务场景。特别是 maxWait，很多人不知道这个参数干嘛的。举个例子，你在一个长文本输入框里打字，如果用户一直不停，普通的防抖可能永远得不到执行机会，maxWait 就是兜底策略，强制最多等 1 秒必须执行一次。

但 lodash 也有让人吐槽的地方。它的 debounce 返回的函数，this 指向是绑死的，如果你在 React 类组件里用，经常需要 .bind(this) 或者箭头函数包一层，不然 this 指飞了你都找不到北。

Underscore：廉颇老矣

Underscore 算是 lodash 的前辈，现在用的人少了，但一些老项目还在用。它的 API 设计和 lodash 很像，但功能少很多，比如没有 maxWait，没有 flush。如果你还在维护十年前的项目，可能会遇到它，但新项目不建议用了，毕竟 lodash 几乎完全兼容它，还更强。

RxJS：函数式编程的重炮

RxJS 这玩意儿，学的时候觉得脑子不够用，用的时候觉得真香。它把防抖节流当成流的操作符来处理，概念上更统一，但学习曲线陡得能攀岩。

import { fromEvent } from 'rxjs';
import { debounceTime, throttleTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

// 搜索框防抖 + 取消上一次请求
const searchInput = document.getElementById('search');
fromEvent(searchInput, 'input').pipe(
  debounceTime(300), // 防抖 300ms
  distinctUntilChanged(), // 值没变就不触发（比如按方向键）
  switchMap(event => { // 自动取消上一次的 Observable
    const keyword = event.target.value;
    console.log('真正发请求:', keyword);
    return fetch(`/api/search?q=${keyword}`).then(r => r.json());
  })
).subscribe(results => {
  renderSearchResults(results);
});

// 滚动节流，带 leading 和 trailing 控制
fromEvent(window, 'scroll').pipe(
  throttleTime(100, undefined, {
    leading: true, // 开始立即执行
    trailing: true // 结束也执行一次
  })
).subscribe(() => {
  checkScrollPosition();
});

RxJS 的好处是，防抖节流只是它庞大工具箱里的两个小螺丝刀，配合 switchMap、concatMap 这些操作符，能完美解决旧请求覆盖新数据这种经典痛点。坏处是，为了用个防抖，你得引入整个 RxJS，哪怕 tree-shaking 也得几十 KB，小项目有点杀鸡用牛刀。

轻量级选手：just-debounce-it 和 throttle-debounce

如果你就是嫌 lodash 太重，可以考虑这些专门做一件事的库。just-debounce-it 只有 200 多字节，throttle-debounce 稍微胖点，但 API 设计得很现代。

// just-debounce-it，极简主义者的最爱
import debounce from 'just-debounce-it';
const myEfficientDebounce = debounce((data) => {
  console.log('处理数据:', data);
}, 250, true); // 第三个参数是 immediate，立即执行
// 取消也很简单
myEfficientDebounce('test'); 
myEfficientDebounce.cancel();

// throttle-debounce，支持 async/await 更友好
import { debounce as smartDebounce, throttle as smartThrottle } from 'throttle-debounce';

// 这个库的 debounce 支持 Promise 返回，还能拿到执行结果
const asyncDebounce = smartDebounce(500, async (id) => {
  const res = await fetch(`/api/user/${id}`);
  return res.json();
});
// 调用时可以 await
const userData = await asyncDebounce(123); 
console.log('用户信息:', userData);

这些库的优点是体积小，缺点是功能相对单一。比如 just-debounce-it 就没有 maxWait，throttle-debounce 的 leading/trailing 控制不如 lodash 灵活。适合对包大小敏感，且需求简单的场景。

WASM 狠人：rust-debounce 和 friends

最近逛 GitHub 发现几个用 Rust 写的防抖节流库，编译成 WASM 跑在浏览器里。理论上性能应该炸裂，毕竟 Rust 没有 GC，内存管理更精细。但实际测下来，在普通业务场景里，和 JS 版本差距不大，只有在极端高频触发（比如鼠标移动事件每秒上千次）时才能看出优势。

// 假设你用了一个 WASM 版本的防抖库（伪代码，具体 API 看具体库）
import init, { create_debounce } from 'rust-debounce';
await init(); // 初始化 WASM 模块
const wasmDebounce = create_debounce((x, y) => console.log('鼠标位置:', x, y), 16); // 约等于 60fps

// 在 mousemove 里用，理论上性能更好
document.addEventListener('mousemove', (e) => {
  wasmDebounce(e.clientX, e.clientY);
});

这种库的坑在于，WASM 的启动有异步初始化过程，而且和 JS 的交互有序列化开销。如果你的防抖函数很简单，WASM 的调用成本可能比节省的 CPU 时间还高。另外，调试困难，报错了堆栈信息全是 wasm 代码，看得你怀疑人生。建议除非你在做图形编辑器、游戏这种高频交互应用，否则别折腾。

常见陷阱与解决方案

有些库看着挺美，一上生产环境就露馅。比如有的在处理快速连续触发时，最后一次执行会丢数据；有的在定时器清理上不干净，内存泄漏让你页面越跑越卡，最后浏览器直接教你做人。还有的对 TypeScript 支持极差，类型推断全红，逼得你只能 any 走天下，这谁能忍？

坑一：定时器清理不干净，内存泄漏到怀疑人生

这是最隐蔽的坑。很多库的 debounce 内部用 setTimeout，但如果你没正确取消，组件卸载了定时器还在跑，轻则内存泄漏，重则回调里访问了已经销毁的 DOM，直接报错。

// React 组件里的错误示范
function SearchComponent() {
  const [results, setResults] = useState([]);
  // 错误！每次渲染都创建新的 debounce 函数
  const handleSearch = debounce((keyword) => {
    fetchResults(keyword).then(setResults);
  }, 300);
  return <input onChange={(e) => handleSearch(e.target.value)} />;
}

// 正确做法：用 useMemo 或 useCallback 缓存
function SearchComponentFixed() {
  const [results, setResults] = useState([]);
  // 用 useMemo 保证只创建一次
  const handleSearch = useMemo(() => debounce((keyword) => {
    fetchResults(keyword).then(setResults);
  }, 300), []); // 空依赖，只初始化一次

  // 组件卸载时取消
  useEffect(() => {
    return () => { handleSearch.cancel(); // 清理 pending 的定时器 };
  }, [handleSearch]);

  return <input onChange={(e) => handleSearch(e.target.value)} />;
}

看到没？React 里用防抖，必须用 useMemo 或者 useRef 来保持函数引用稳定，不然每次渲染都是新的函数，防抖个寂寞。而且卸载时一定要 cancel，不然你在组件 A 里发的请求，回调里 setState，结果组件 A 已经卸载了，React 会报警告，严重点整个应用崩溃。

坑二：异步地狱，Promise 状态乱套

如果你防抖的是一个 async 函数，要特别注意执行顺序。有些库的 debounce 不会等你 Promise 完成，只是延迟调用。如果连续触发，可能会同时存在多个 pending 的 Promise，最后哪个先回来还真不好说。

// 错误示范：自己瞎封装的 async 防抖
function badAsyncDebounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer); 
    timer = setTimeout(async () => {
      // async 回调，但 debounce 不管 Promise
      await fn.apply(this, args);
    }, delay);
  };
}
// 问题：如果 fn 执行时间很长，期间又触发了，不会取消上一次的执行
// 只是延迟了下一次的调用时间，两次请求可能同时存在

// 正确做法：用 AbortController 取消请求，或者用能处理 Promise 的库
import { debounce } from 'throttle-debounce';
function SearchComponentPro() {
  const abortControllerRef = useRef(null);
  const searchDebounce = useMemo(() => debounce(300, async (keyword) => {
    // 取消上一次的请求
    if (abortControllerRef.current) abortControllerRef.current.abort();
    // 创建新的 controller 
    abortControllerRef.current = new AbortController();
    try {
      const res = await fetch(`/api/search?q=${keyword}`, { signal: abortControllerRef.current.signal });
      const data = await res.json();
      setResults(data);
    } catch (err) {
      if (err.name === 'AbortError') { console.log('请求被取消，这是正常的'); }
      else { console.error('搜索出错:', err); }
    }
  }), []);

  useEffect(() => {
    return () => {
      searchDebounce.cancel();
      if (abortControllerRef.current) abortControllerRef.current.abort();
    };
  }, [searchDebounce]);

  return <input onChange={(e) => searchDebounce(e.target.value)} />;
}

这个例子结合了防抖和请求取消，是搜索框的终极解决方案。AbortController 是现代浏览器提供的标准 API，能真正取消 fetch 请求，而不是仅仅忽略结果。配合 debounce，既避免了频繁请求，又保证了数据一致性。

坑三：this 指向迷之丢失

这是 JS 的老问题了，但在防抖场景下特别容易踩。因为 debounce 返回的是新函数，原函数的 this 上下文会丢失。

class SearchManager {
  constructor() {
    this.cache = new Map();
    // 错误！这里 this 会指向 window 或 undefined（严格模式）
    this.debouncedSearch = debounce(this.search, 300);
  }
  search(keyword) {
    // 这里的 this 是 undefined！
    console.log(this.cache); // 报错！
  }
}

// 解决方案 1：箭头函数
class SearchManagerFixed {
  constructor() {
    this.cache = new Map();
    this.debouncedSearch = debounce((keyword) => this.search(keyword), 300);
  }
  search(keyword) {
    console.log(this.cache); // 正常
  }
}

// 解决方案 2：bind
class SearchManagerBind {
  constructor() {
    this.cache = new Map();
    this.debouncedSearch = debounce(this.search.bind(this), 300);
  }
}

// 解决方案 3：用 class fields 语法（最优雅）
class SearchManagerModern {
  cache = new Map();
  // 箭头函数属性，自动绑定 this 
  debouncedSearch = debounce((keyword) => {
    console.log(this.cache); // 完美
    return this.fetchData(keyword);
  }, 300);
  async fetchData(keyword) { /* ... */ }
}

如果你用 TypeScript，第三个方案最爽，类型推断完美，this 也不会丢。但注意，class fields 语法创建的 debounce 函数是每个实例独立的，如果你创建 1000 个实例，就有 1000 个 debounce 函数和定时器，内存占用要考虑。

坑四：时间参数的动态调整

有些场景需要动态调整防抖延迟，比如网络好的时候 300ms，网络差的时候 100ms。但大多数库的 delay 参数是固定的，创建后不能改。

// 自己封装一个支持动态延迟的防抖
function createAdaptiveDebounce(fn) {
  let timer = null;
  let currentDelay = 300; // 默认 300ms
  const debounced = function (...args) {
    clearTimeout(timer); 
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, currentDelay);
  };
  // 暴露修改延迟的方法 
  debounced.setDelay = (newDelay) => { currentDelay = newDelay; };
  debounced.cancel = () => { clearTimeout(timer); };
  return debounced;
}

// 使用：根据网络状况调整
const adaptiveSearch = createAdaptiveDebounce((keyword) => {
  console.log('用', currentDelay, 'ms 的延迟搜索:', keyword);
});

// 检测到网络变慢
window.addEventListener('offline', () => {
  adaptiveSearch.setDelay(100); // 离线或慢网时减少延迟，快速反馈
});
window.addEventListener('online', () => {
  adaptiveSearch.setDelay(300); // 恢复默认
});

这种自适应防抖在移动端特别有用，4G 和 WiFi 切换时自动调整，用户体验更好。但注意，setDelay 只会影响下一次触发，已经 pending 的定时器不会变。

实战场景应用

光说不练假把式。搜索框联想这个经典场景，用防抖是基操，但怎么配合取消上一个请求，避免旧数据覆盖新数据，这里面的门道深着呢。还有那个无限滚动加载，节流用得不好，用户滚得快了直接白屏，滚慢了又频繁请求，怎么调参数才能既丝滑又省流量？甚至在一些拖拽排序、窗口 resize 监听里，这俩函数组合拳打好了，体验直接起飞。

搜索框的终极方案：防抖 + 请求取消 + 竞态处理

搜索框是防抖最经典的场景，但很多人只做了表面功夫。真正的生产环境要考虑：

1. 快速输入时取消旧请求
2. 防止旧请求晚返回覆盖新结果
3. 空值处理（用户删光内容时不搜索）
4. 加载状态管理
5. 错误重试

// React + TypeScript 完整版搜索组件
import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import { debounce } from 'lodash';

interface SearchResult {
  id: string;
  title: string;
  description: string;
}

interface UseSearchOptions {
  minLength?: number; // 最小搜索长度
  debounceMs?: number; // 防抖延迟
  maxWaitMs?: number; // 最大等待时间
}

function useSmartSearch(fetcher: (keyword: string) => Promise<SearchResult[]>, options: UseSearchOptions = {}) {
  const { minLength = 1, debounceMs = 300, maxWaitMs = 1000 } = options;
  const [keyword, setKeyword] = useState('');
  const [results, setResults] = useState<SearchResult[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  // 用 ref 存储最新的请求序号，处理竞态
  const requestIdRef = useRef(0);
  const abortControllerRef = useRef<AbortController | null>(null);

  // 创建防抖的搜索函数
  const debouncedSearch = useMemo(() => debounce(async (searchTerm: string, currentRequestId: number) => {
    // 长度不够不搜索
    if (searchTerm.length < minLength) {
      setResults([]);
      return;
    }
    setLoading(true);
    setError(null);

    // 取消上一次请求
    if (abortControllerRef.current) abortControllerRef.current.abort();
    abortControllerRef.current = new AbortController();

    try {
      const data = await fetcher(searchTerm);
      // 检查是否是最新请求，防止旧数据覆盖
      if (currentRequestId === requestIdRef.current) {
        setResults(data);
      } else {
        console.log('忽略过期的搜索结果');
      }
    } catch (err) {
      if (err.name === 'AbortError') return;
      if (currentRequestId === requestIdRef.current) {
        setError(err);
      }
    } finally {
      if (currentRequestId === requestIdRef.current) {
        setLoading(false);
      }
    }
  }, debounceMs, { maxWait: maxWaitMs }), [fetcher, minLength, debounceMs, maxWaitMs]);

  // 监听 keyword 变化
  useEffect(() => {
    requestIdRef.current += 1;
    const currentId = requestIdRef.current;
    debouncedSearch(keyword, currentId);
    // 清理函数
    return () => { debouncedSearch.cancel(); };
  }, [keyword, debouncedSearch]);

  // 组件卸载时彻底清理
  useEffect(() => {
    return () => {
      if (abortControllerRef.current) abortControllerRef.current.abort();
    };
  }, []);

  return {
    keyword, setKeyword, results, loading, error,
    // 手动刷新，不受防抖影响
    refresh: useCallback(() => {
      requestIdRef.current += 1;
      debouncedSearch(keyword, requestIdRef.current);
      debouncedSearch.flush(); // 立即执行
    }, [keyword, debouncedSearch])
  };
}

// 使用示例
function SearchComponent() {
  const fetchSearchResults = async (keyword: string): Promise<SearchResult[]> => {
    const res = await fetch(`/api/search?q=${encodeURIComponent(keyword)}`);
    if (!res.ok) throw new Error('搜索失败');
    return res.json();
  };
  const { keyword, setKeyword, results, loading, error, refresh } = useSmartSearch(fetchSearchResults, { minLength: 2, debounceMs: 300, maxWaitMs: 800 });

  return (
    <div className="search-container">
      <input type="text" value={keyword} onChange={(e) => setKeyword(e.target.value)} placeholder="输入关键词搜索..." className="search-input" />
      {loading && <div className="loading-spinner">加载中...</div>}
      {error && (
        <div className="error-message">出错了:{error.message}<button onClick={refresh}>重试</button></div>
      )}
      <ul className="results-list">
        {results.map(item => (
          <li key={item.id} className="result-item">
            <h4>{item.title}</h4>
            <p>{item.description}</p>
          </li>
        ))}
      </ul>
      {results.length === 0 && !loading && keyword.length >= 2 && (
        <div className="empty-state">暂无结果</div>
      )}
    
  );
}

这个 Hook 的精髓在于 requestIdRef，每次 keyword 变化就自增，请求返回时检查 id 是否匹配，不匹配就直接丢弃。这比 AbortController 更可靠，因为 AbortController 只能取消请求，但如果请求已经在返回路上，取消不了，这时候 id 检查就能过滤掉旧数据。

无限滚动加载：节流的参数调优艺术

无限滚动是节流的经典场景，但参数调不好，要么卡成 PPT，要么疯狂请求把服务器打挂。

// 无限滚动 Hook，带智能节流
import { useEffect, useRef, useState, useCallback } from 'react';
import { throttle } from 'lodash';

function useInfiniteScroll(fetchMore: () => Promise<boolean>, options = {}) {
  const { threshold = 100, // 距离底部多少像素触发
    throttleMs = 200, // 节流间隔
    maxRetries = 3 // 失败重试次数
  } = options;
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [error, setError] = useState(null);
  const retryCountRef = useRef(0);
  const containerRef = useRef(null);

  // 加载更多数据的包装函数
  const loadMore = useCallback(async () => {
    if (loading || !hasMore) return;
    setLoading(true);
    setError(null);
    try {
      const more = await fetchMore();
      setHasMore(more);
      retryCountRef.current = 0; // 成功重置重试计数
    } catch (err) {
      console.error('加载失败:', err);
      setError(err);
      // 失败重试逻辑
      if (retryCountRef.current < maxRetries) {
        retryCountRef.current += 1;
        setTimeout(() => {
          setError(null); // 这里可以再次触发检查，或者等用户下次滚动
        }, 1000 * retryCountRef.current); // 指数退避
      }
    } finally {
      setLoading(false);
    }
  }, [fetchMore, loading, hasMore]);

  // 节流的滚动检查函数
  const throttledCheck = useMemo(() => throttle(() => {
    if (!containerRef.current) return;
    const container = containerRef.current;
    const scrollBottom = container.scrollTop + container.clientHeight;
    const height = container.scrollHeight;
    // 距离底部 threshold 像素时触发
    if (height - scrollBottom < threshold) {
      loadMore();
    }
  }, throttleMs, { leading: false, // 滚动开始不立即执行，等停下来
    trailing: true // 滚动结束检查一次
  }), [loadMore, threshold, throttleMs]);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;
    container.addEventListener('scroll', throttledCheck);
    // 初始检查，防止内容不够一屏
    throttledCheck();
    return () => {
      container.removeEventListener('scroll', throttledCheck);
      throttledCheck.cancel();
    };
  }, [throttledCheck]);

  // 暴露刷新方法
  const refresh = useCallback(() => {
    setHasMore(true);
    setError(null);
    retryCountRef.current = 0;
    loadMore();
  }, [loadMore]);

  return { containerRef, loading, hasMore, error, refresh };
}

// 使用示例
function FeedList() {
  const [page, setPage] = useState(1);
  const [items, setItems] = useState([]);
  const fetchMore = async () => {
    const res = await fetch(`/api/feed?page=${page}&limit=20`);
    const data = await res.json();
    if (data.length === 0) return false; // 没有更多了
    setItems(prev => [...prev, ...data]);
    setPage(p => p + 1);
    return true; // 可能还有更多
  };
  const { containerRef, loading, hasMore, error, refresh } = useInfiniteScroll(fetchMore, { threshold: 150, // 提前 150px 开始加载，无缝体验
    throttleMs: 150 // 150ms 检查一次，平衡性能和实时性
  });

  return (
    <div ref={containerRef} className="feed-container" style={{ overflowY: 'auto', height: '100vh' }}>
      {items.map(item => (<FeedCard key={item.id} data={item} />))}
      {loading && <div className="loading-more">加载中...</div>}
      {!hasMore && <div className="no-more">到底了，别刷了</div>}
      {error && (
        <div className="error-load">加载失败 <button onClick={refresh}>点击重试</button></div>
      )}
    </div>
  );
}

这里的参数 tuning 是关键。threshold 设太小，用户滑到底才加载，会看到白屏；设太大，提前加载太多，浪费流量。throttleMs 也是，设太小，滚动时频繁检查，CPU 占用高；设太大，可能错过触发时机。一般建议 threshold 100-200px，throttleMs 100-200ms，根据实际内容高度调整。

拖拽排序：防抖节流的组合拳

拖拽排序这种高频交互，需要同时用防抖和节流。节流控制位置更新的频率（60fps 流畅度），防抖处理最终的保存请求。

// 拖拽排序组件，组合拳示例
import React, { useState, useCallback, useRef } from 'react';
import { throttle, debounce } from 'lodash';

function SortableList({ items: initialItems, onReorder }) {
  const [items, setItems] = useState(initialItems);
  const [draggingId, setDraggingId] = useState(null);
  const [dragOverId, setDragOverId] = useState(null);

  // 节流：拖拽时实时更新位置，限制 60fps（16ms）
  const throttledMove = useMemo(() => throttle((fromId, toId) => {
    setItems(prev => {
      const fromIndex = prev.findIndex(i => i.id === fromId);
      const toIndex = prev.findIndex(i => i.id === toId);
      if (fromIndex === -1 || toIndex === -1) return prev;
      const newItems = [...prev];
      const [moved] = newItems.splice(fromIndex, 1);
      newItems.splice(toIndex, 0, moved);
      return newItems;
    });
  }, 16), []);

  // 防抖：拖拽结束后保存，等 500ms 确认没再拖了再发请求
  const debouncedSave = useMemo(() => debounce((newItems) => {
    console.log('保存新顺序到服务器:', newItems.map(i => i.id));
    onReorder(newItems);
  }, 500), [onReorder]);

  const handleDragStart = useCallback((e, id) => {
    setDraggingId(id);
    e.dataTransfer.effectAllowed = 'move'; // 设置拖拽图像（可选）
    const img = new Image();
    img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
    e.dataTransfer.setDragImage(img, 0, 0);
  }, []);

  const handleDragOver = useCallback((e, id) => {
    e.preventDefault();
    if (id === draggingId || id === dragOverId) return;
    setDragOverId(id);
    // 节流更新视觉顺序，流畅但不卡
    throttledMove(draggingId, id);
  }, [draggingId, dragOverId, throttledMove]);

  const handleDrop = useCallback((e) => {
    e.preventDefault();
    setDraggingId(null);
    setDragOverId(null);
    // 防抖保存，避免频繁请求
    debouncedSave(items);
  }, [items, debouncedSave]);

  const handleDragEnd = useCallback(() => {
    setDraggingId(null);
    setDragOverId(null);
    // 如果没触发 drop，也要保存
    debouncedSave.flush(); // 立即执行，不等了
  }, [debouncedSave]);

  return (
    <ul className="sortable-list" onDragEnd={handleDragEnd}>
      {items.map((item, index) => (
        <li key={item.id} draggable onDragStart={(e) => handleDragStart(e, item.id)} onDragOver={(e) => handleDragOver(e, item.id)} onDrop={handleDrop} className={`sortable-item ${draggingId === item.id ? 'dragging' : ''}${dragOverId === item.id ? 'drag-over' : ''}`} style={{ transform: draggingId === item.id ? 'scale(1.02)' : 'none', transition: 'transform 0.1s' }}>
          <span className="drag-handle">☰</span>
          <span className="item-index">{index + 1}.</span>
          <span className="item-content">{item.content}</span>
        </li>
      ))}
    </ul>
  );
}

// 使用
function App() {
  const [items, setItems] = useState([
    { id: '1', content: '学习 React' },
    { id: '2', content: '学习 TypeScript' },
    { id: '3', content: '学习 Node.js' },
    { id: '4', content: '学习设计模式' }
  ]);
  const handleReorder = useCallback(async (newItems) => {
    // 这里可以发请求保存顺序
    await fetch('/api/reorder', {
      method: 'POST',
      body: JSON.stringify({ ids: newItems.map(i => i.id) }),
      headers: { 'Content-Type': 'application/json' }
    });
  }, []);
  return <SortableList items={items} onReorder={handleReorder} />;
}

这个例子展示了如何组合使用：throttle 处理高频的拖拽移动（16ms 约等于 60fps），debounce 处理低频的保存操作（500ms）。这样既保证了拖拽的流畅度，又避免了服务器压力。

窗口 Resize：性能杀手怎么治

窗口 resize 是性能重灾区，如果不做处理，连续触发几百次，重排重绘能把页面卡死。

// 响应式布局的 Resize 处理
import { useEffect, useState, useMemo } from 'react';
import { debounce, throttle } from 'lodash';

function useResponsive() {
  const [windowSize, setWindowSize] = useState({ width: window.innerWidth, height: window.innerHeight });
  const [breakpoint, setBreakpoint] = useState('desktop');

  // 节流：实时更新尺寸，限制频率
  const throttledUpdateSize = useMemo(() => throttle(() => {
    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
  }, 100), []); // 100ms 更新一次尺寸数据

  // 防抖：判断断点变化，等 resize 结束再确定
  const debouncedUpdateBreakpoint = useMemo(() => debounce((width) => {
    if (width < 768) setBreakpoint('mobile');
    else if (width < 1024) setBreakpoint('tablet');
    else setBreakpoint('desktop');
    // 可以在这里触发布局重计算
    console.log('当前断点:', width < 768 ? 'mobile' : width < 1024 ? 'tablet' : 'desktop');
  }, 150), []);

  useEffect(() => {
    const handleResize = () => {
      throttledUpdateSize();
      debouncedUpdateBreakpoint(window.innerWidth);
    };
    window.addEventListener('resize', handleResize);
    // 初始化一次
    handleResize();
    return () => {
      window.removeEventListener('resize', handleResize);
      throttledUpdateSize.cancel();
      debouncedUpdateBreakpoint.cancel();
    };
  }, [throttledUpdateSize, debouncedUpdateBreakpoint]);

  return { ...windowSize, breakpoint, isMobile: breakpoint === 'mobile', isTablet: breakpoint === 'tablet', isDesktop: breakpoint === 'desktop' };
}

// 使用：自适应组件
function AdaptiveLayout() {
  const { width, height, breakpoint, isMobile } = useResponsive();
  return (
    <div className={`layout ${breakpoint}`}>
      <header><h1>当前窗口:{width}x{height}</h1><p>断点:{breakpoint}</p></header>
      <main style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: '20px', transition: 'grid-template-columns 0.3s' }}> {/* 平滑过渡 */}
        <div className="card">内容 1</div>
        <div className="card">内容 2</div>
        <div className="card">内容 3</div>
      </main>
    </div>
  );
}

这里用了双重保险：throttle 保证尺寸数据实时但不频繁更新，debounce 保证断点判断在 resize 结束后才最终确定。如果只用 throttle，resize 过程中会频繁判断断点，可能导致布局抖动；如果只用 debounce，resize 过程中完全没有反馈，用户看不到实时变化。

调试与排查

有时候代码明明没毛病，就是不生效。这时候别急着删库跑路。先看看是不是上下文 this 指飞了，特别是在回调函数里；再查查定时器有没有被意外清除，或者多个实例互相干扰。如果是用了异步 async/await，更要小心，别让 Promise 的状态把执行顺序搞乱了。学会用浏览器的 Performance 面板抓时间线，一眼就能看出是哪个环节掉了链子。

调试技巧一：Devtools Performance 面板

打开 Chrome DevTools，切到 Performance 面板，录制一段交互，你能看到：

1. Task：看是否有长任务（Long Task），如果有，说明防抖节流没生效，主线程被阻塞了
2. Function Call：展开后能看到 debounce/throttle 内部函数的调用频率
3. Timer Fired：看 setTimeout/setInterval 的触发情况，检查定时器是否按预期工作

// 给 debounce 函数打标记，方便在 Performance 面板识别
function debugDebounce(fn, delay) {
  let timer;
  return function (...args) {
    // 在控制台标记，Performance 面板能看到
    console.timeStamp('debounce triggered');
    clearTimeout(timer); 
    timer = setTimeout(() => {
      console.timeStamp('debounce executed');
      fn.apply(this, args);
    }, delay);
  };
}

// 使用
const test = debugDebounce(() => { console.log('真正执行'); }, 1000);
// 快速点击 5 次
for (let i = 0; i < 5; i++) {
  setTimeout(() => test(i), i * 100);
}
// 预期：只看到一次 'debounce executed' 和 '真正执行'

调试技巧二：检查多个实例

React 中最常见的 bug 是创建了多个 debounce 实例，每个都有自己的定时器，结果就乱套了。

// 错误示范：每次渲染都创建新实例
function BadComponent() {
  const [count, setCount] = useState(0);
  // 错误！每次渲染都新的 debounce
  const handleClick = debounce(() => {
    console.log('点击了', count);
  }, 1000);
  return <button onClick={handleClick}>点我</button>;
}

// 怎么发现这个问题？加日志
function BadComponentDebug() {
  const [count, setCount] = useState(0);
  const handleClick = useMemo(() => {
    console.log('创建新的 debounce 实例'); // 如果频繁打印，说明有问题
    return debounce(() => {
      console.log('执行，count=', count);
    }, 1000);
  }, [count]); // 依赖 count 导致每次更新都重建
  return <button onClick={handleClick}>点我</button>;
}

// 正确做法：空依赖数组，或者用 ref
function GoodComponent() {
  const countRef = useRef(count);
  countRef.current = count; // 保持最新值
  const handleClick = useMemo(() => {
    return debounce(() => {
      console.log('执行，count=', countRef.current); // 通过 ref 获取最新值
    }, 1000);
  }, []); // 空依赖，只创建一次
  return <button onClick={handleClick}>点我</button>;
}

调试技巧三：内存泄漏检测

如果组件反复挂载卸载，debounce 的定时器没清理，会导致内存泄漏。用 Chrome 的 Memory 面板可以检测：

1. 打开 Memory 面板
2. 点击 Take heap snapshot
3. 执行一系列操作（比如打开关闭弹窗 10 次）
4. 再拍一张快照
5. 对比两个快照，搜索你的组件名或 debounce 相关对象

如果发现实例数量只增不减，说明有泄漏。检查 useEffect 的 cleanup 函数是否调用了 cancel。

// 安全的 Hook 封装，带内存泄漏防护
function useSafeDebounce(fn, delay, deps = []) {
  const fnRef = useRef(fn);
  fnRef.current = fn;
  const debouncedFn = useMemo(() => debounce((...args) => fnRef.current(...args), delay), [delay]); // 只依赖 delay

  useEffect(() => {
    return () => { debouncedFn.cancel(); };
  }, [debouncedFn]);
  return debouncedFn;
}

// 使用
function SafeComponent() {
  const [text, setText] = useState('');
  const debouncedSearch = useSafeDebounce((value) => {
    console.log('搜索:', value);
  }, 500);
  return (
    <input value={text} onChange={(e) => {
      setText(e.target.value);
      debouncedSearch(e.target.value);
    }} />
  );
}

进阶优化技巧

除了调库，咱还得有点私货。比如怎么封装一个通用的 Hook，在 React 或 Vue 里一行代码搞定防抖；怎么利用函数的柯里化，把配置项预设好，让业务代码清爽得像刚洗过的衬衫。还有啊，别死守着默认参数，根据网络状况动态调整延迟时间，这种小细节才是区分初级和高级开发的分水岭。

Trick 1：通用 Hook 封装，一行代码搞定

// 终极版 useDebounce Hook，支持所有选项
import { useMemo, useEffect, useRef } from 'react';
import { debounce, throttle, DebouncedFunc, ThrottledFunc } from 'lodash';
import type { DebounceSettings, ThrottleSettings } from 'lodash';

type UseDebounceOptions = DebounceSettings & { immediate?: boolean; };

export function useDebounce<T extends (...args: any[]) => any>(fn: T, delay: number = 300, options: UseDebounceOptions = {}): DebouncedFunc<T> & { cancel: () => void; flush: () => void } {
  const { immediate = false, ...debounceOptions } = options;
  const fnRef = useRef(fn);
  fnRef.current = fn;
  const debounced = useMemo(() => {
    const debouncedFn = debounce((...args: Parameters<T>) => fnRef.current(...args), delay, {
      leading: immediate, // 立即执行用 leading
      trailing: !immediate, // 非立即执行用 trailing
      ...debounceOptions
    });
    return debouncedFn;
  }, [delay, immediate, ...Object.values(debounceOptions)]);

  useEffect(() => {
    return () => { debounced.cancel(); };
  }, [debounced]);
  return debounced as any;
}

// 对应的 useThrottle
export function useThrottle<T extends (...args: any[]) => any>(fn: T, interval: number = 200, options: ThrottleSettings = {}): ThrottledFunc<T> & { cancel: () => void; flush: () => void } {
  const fnRef = useRef(fn);
  fnRef.current = fn;
  const throttled = useMemo(() => {
    return throttle((...args: Parameters<T>) => fnRef.current(...args), interval, {
      leading: true,
      trailing: false,
      ...options
    });
  }, [interval, ...Object.values(options)]);

  useEffect(() => {
    return () => throttled.cancel();
  }, [throttled]);
  return throttled as any;
}

// 使用示例，简单到离谱
function SearchInput() {
  const [value, setValue] = useState('');
  // 一行代码搞定，还能自动清理
  const debouncedSearch = useDebounce((keyword: string) => {
    console.log('搜索:', keyword); // 发请求...
  }, 500, { maxWait: 2000 }); // 最长等 2 秒

  return (
    <input value={value} onChange={(e) => {
      setValue(e.target.value);
      debouncedSearch(e.target.value);
    }} placeholder="输入搜索关键词..." />
  );
}

这个 Hook 的精髓在于：

1. 用 ref 保持函数引用最新，避免闭包陷阱
2. 自动处理 cancel，防止内存泄漏
3. TypeScript 类型完整，有智能提示
4. 支持所有 lodash 的选项

Trick 2：柯里化预设配置

如果你在一个项目里到处都用同样的防抖配置，可以用柯里化封装：

// 创建预设的防抖函数工厂
const createProjectDebounce = (defaultDelay = 300) => {
  return (fn, customDelay, customOptions) => {
    return debounce(fn, customDelay || defaultDelay, {
      maxWait: 1000, // 项目统一配置
      leading: false,
      trailing: true,
      ...customOptions // 允许覆盖
    });
  };
};

// 创建项目级实例
const projectDebounce = createProjectDebounce(300);

// 使用，代码更清爽
const search = projectDebounce((keyword) => { api.search(keyword); });
const saveDraft = projectDebounce((content) => { api.saveDraft(content); }, 1000); // 覆盖延迟为 1 秒
const urgentSave = projectDebounce((content) => { api.save(content); }, 0, { leading: true, trailing: false }); // 完全自定义

Trick 3：网络自适应延迟

根据网络状况动态调整防抖时间，WiFi 时延迟高点省流量，4G 时延迟低点快速反馈。

// 网络状态感知防抖
function useNetworkAwareDebounce(fn, options = {}) {
  const { fastDelay = 100, slowDelay = 500 } = options;
  const [delay, setDelay] = useState(slowDelay);

  useEffect(() => {
    // 监听网络变化
    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
    if (connection) {
      const updateConnectionStatus = () => {
        // effectiveType: '4g', '3g', '2g', 'slow-2g'
        const effectiveType = connection.effectiveType;
        if (effectiveType === '4g' && !connection.saveData) {
          setDelay(fastDelay); // 网速快，延迟低点
        } else {
          setDelay(slowDelay); // 网速慢或省流量模式，延迟高点
        }
      };
      connection.addEventListener('change', updateConnectionStatus);
      updateConnectionStatus(); // 初始检查
      return () => connection.removeEventListener('change', updateConnectionStatus);
    }
  }, [fastDelay, slowDelay]);

  return useDebounce(fn, delay, options);
}

// 使用
function SmartSearch() {
  const search = useNetworkAwareDebounce((keyword) => api.search(keyword), { fastDelay: 150, slowDelay: 600 });
  return <input onChange={(e) => search(e.target.value)} />;
}

Trick 4：组合键防抖

处理键盘快捷键时，需要特殊处理，比如 Ctrl+S 保存，要防止按住不放时疯狂触发。

// 键盘快捷键防抖
function useKeyboardShortcut(keyCombo, callback, delay = 300) {
  const pressedKeys = useRef(new Set());
  const debouncedCallback = useDebounce(callback, delay, { leading: true, // 第一次立即执行
    trailing: false // 不补执行
  });

  useEffect(() => {
    const handleKeyDown = (e) => {
      const key = e.key.toLowerCase();
      pressedKeys.current.add(key);
      // 检查组合键是否匹配
      const keys = keyCombo.toLowerCase().split('+');
      const allPressed = keys.every(k => pressedKeys.current.has(k));
      if (allPressed) {
        e.preventDefault();
        debouncedCallback();
      }
    };
    const handleKeyUp = (e) => {
      pressedKeys.current.delete(e.key.toLowerCase());
    };
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('keyup', handleKeyUp);
    };
  }, [keyCombo, debouncedCallback]);
}

// 使用：Ctrl+S 保存，即使按住也只执行一次
function Editor() {
  useKeyboardShortcut('ctrl+s', () => {
    console.log('保存文档...');
    saveDocument();
  }, 500);
  return <textarea />;
}

总结

行了，差不多就唠到这。其实工具再好，也就是个辅助，关键还是得理解背后的原理，不然换个场景照样抓瞎。下次要是再看到谁在项目里手写十几行的防抖函数，记得把这篇文章甩他脸上，让他知道什么叫站在巨人的肩膀上摸鱼。

说到底，防抖和节流这俩玩意儿，前端面试问了十年，项目里用了十年，但每年还是有新人踩坑。为啥？因为光看概念简单，真到工程实践里，要考虑边界情况、内存管理、异步处理、框架集成，复杂度直接翻倍。

2026 年了，lodash 依然是稳妥的选择，但如果你对包大小敏感，throttle-debounce 这种轻量库也够用了。RxJS 适合已经在用响应式编程的项目，WASM 版本除非极端性能需求否则不建议折腾。

最后送大家一句话：别重复造轮子，除非你能造得更好；也别盲目用库，除非你理解它在干嘛。技术选型没有银弹，只有适合当前场景的解决方案。咱们下期再见，拜拜了您嘞！