問題

這有一個簡單的防抖函數，短時間內多次觸發同一事件，只執行最后一次

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

但問題是這個函數在react中使用不生效

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

原因就是函數式組件每次渲染，函數都會被重建，導致平時用的 debounce 函數中的timer會重新創建，進而導致防抖失效。

方案一

使用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);} }

方案二

使用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>); }

總結

以上是生活随笔為你收集整理的React中实现防抖功能的两种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。