快捷導(dǎo)航

react事件回調(diào)中使用防抖失敗的常見(jiàn)錯(cuò)誤和正確使用方式

更新時(shí)間：2025年06月06日 09:24:02 作者：學(xué)習(xí)兩年半的前端練習(xí)生

這篇文章主要介紹了react事件回調(diào)中使用防抖失敗的常見(jiàn)錯(cuò)誤和正確使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

使用時(shí)常見(jiàn)的錯(cuò)誤和原因

問(wèn)題：直接把debounce（防抖函數(shù)）當(dāng)回調(diào)函數(shù)用（體現(xiàn)在debounce內(nèi)執(zhí)行函數(shù)，而不是函數(shù)本身）

報(bào)錯(cuò)代碼：func is not a function TypeError: func is not a function at eval (http://localhost:3005/static/js/bundle.js:306181:32)。

原因：debounce的基本用法是：

傳入一個(gè)“函數(shù)”和等待時(shí)間，返回一個(gè)新的“防抖后函數(shù)”。你應(yīng)該調(diào)用返回的這個(gè)新函數(shù)，而不是在debounce內(nèi)直接執(zhí)行原函數(shù)。

onChange={(debounce(changeDepartmentId("123"), 300))}

問(wèn)題：直接把debounce（防抖函數(shù)）套在回調(diào)函數(shù)外面，但是debounce內(nèi)的回調(diào)函數(shù)卻沒(méi)有執(zhí)行任何內(nèi)容。

錯(cuò)誤代碼和原因：對(duì)react中事件回調(diào)了解不夠，導(dǎo)致防抖函數(shù)沒(méi)有執(zhí)行。

//這種的回調(diào)是把 debounce 函數(shù)作為屬性傳給子組件，而父中定義的changeDepartmentId只是單純的函數(shù)
onChange={debounce(changeDepartmentId, 300)}

// 這種的回調(diào)是把 changeDepartmentId 函數(shù)作為屬性傳遞給子組件，當(dāng)onChange事件觸發(fā)，子組件內(nèi)調(diào)用 changeDepartmentId 函數(shù)
onChange={changeDepartmentId}

// 這種寫(xiě)法是直接在onChange事件中調(diào)用 changeDepartmentId 函數(shù)
onChange={(value)=>changeDepartmentId(value)}

問(wèn)題：正確使用了防抖但是沒(méi)有起到防抖效果，常見(jiàn)原因和錯(cuò)誤代碼：

這樣每次調(diào)用 changeDepartmentId，都會(huì)重新創(chuàng)建一個(gè)新的 debounce 實(shí)例，而不是復(fù)用同一個(gè)防抖函數(shù)。

這樣的話(huà)，防抖的定時(shí)器每次都是新的，根本起不到“上一次未到時(shí)間就清除本次”的效果，所以沒(méi)有防抖。

changeDepartmentId={(value) => {
        debounce(setState(prev => ({ ...prev,id:value})), 300)
}}

正確用法下的解決方案

在組件外部或 useCallback/useMemo 里只創(chuàng)建防抖函數(shù)，然后復(fù)用它。（防止防抖函數(shù)重復(fù)創(chuàng)建）

 //部門(mén)編號(hào)搜索聯(lián)想，useCallback防止函數(shù)重新創(chuàng)建實(shí)例
 const changeDepartmentId = useCallback(
        //正確防抖
        debounce((value: string) => {
            //設(shè)置搜索值
            setState(prev => ({ ...prev, searchData: { ...prev.searchData, departmentIdentifier: value } }))
        }, 300),
        []
    );


//使用回調(diào)
changeDepartmentId={changeDepartmentId}