前端防抖动（debounce）的几种方法

最新推荐文章于 2025-03-31 04:05:45 发布

大悦悦吖Y

最新推荐文章于 2025-03-31 04:05:45 发布

阅读量1.2k

点赞数

文章标签：前端 react.js

本文链接：https://blog.csdn.net/weixin_49074407/article/details/128788215

版权

本文探讨了在React中防止抖动（debounce）的三种方法。由于函数组件每次渲染时内部函数会被重建，常规的防抖函数可能失效。解决方案包括使用`useRef`缓存timer变量以确保防抖功能在React组件更新时依然有效，以及利用`useCallback`缓存函数，通过传递空数组确保在组件重渲染时不重新创建函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方案一

防抖函数，短时间内多次触发同一事件，只执行最后一次，这个函数在React中使用不生效，原因就是函数组件每次渲染，函数都会被重建，导致平时用的 debounce 函数中的timer会重新创建，导致防抖失效。

function debounce (fn, wait) {
  let timer = null
  return function (...args) {
    if (timer !== null) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn(args)
      timer = null
    }, wait)
  }
}

export default () => {
  const handleClick = debounce(() => console.log("click fast!"), 1000));
  return (
     <button onClick={handleClick}>click fast!</button>
  );
};

方案二

【React可用】用useRef来缓存timer变量

export default function () {
  const click = useDebounce((e: Event) => {
    console.log(e);
  }, 1000)
  
  return (
    <button onClick={click}>按钮</button>
  );
}

function useDebounce(fn: Function, delay: number) {
  const refTimer = useRef<number>();

  return function f(...args: any) {
    if (refTimer.current) {
      clearTimeout(refTimer.current);
    }
    refTimer.current = setTimeout(() => {
      fn(args);
    }, delay);
  }
}

方案三

【React可用】useCallback来缓存函数，只要第二个参数传空数组，在组件重新选然时，useCallback中的函数就不会重新创建

export default function DeBounce() {
  const click = useCallback(clickInner(), []);

  function clickInner() {
    let timer: number;
    return function (e: Event) {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        console.log(e);
      }, 1000);
    }
  }

  return (
    <button onClick={click}>按钮</button>
  );
}