快捷導(dǎo)航

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

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

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

使用時常見的錯誤和原因

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

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

原因：debounce的基本用法是：

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

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

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

錯誤代碼和原因：對react中事件回調(diào)了解不夠，導(dǎo)致防抖函數(shù)沒有執(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}

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

問題：正確使用了防抖但是沒有起到防抖效果，常見原因和錯誤代碼：

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

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

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

正確用法下的解決方案

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

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


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