react hooks 防抖函式

2021-10-23 10:21:01 字數 799 閱讀 8676

防抖的意思就是使用者輸入的時候不會頻繁請求介面,一旦使用者停下來在設定的時間內都沒有再輸入,那就可以傳送請求,所以這樣就減少了請求

防抖這個用hooks有點小麻煩,主要是要獲取input傳入的引數

event.persist(),這個是要加上的,不然會報乙個警告,如下圖所示:

翻譯一下就是:由於效能原因,此綜合事件被重用。如果您看到此訊息,那麼您正在訪問已發布/無效的合成事件上的屬性「 target」。設定為空。如果必須保留原始的合成事件,請使用event.persist()

import react,  from 'react';

export default () => = useref();

useeffect(function () , [fn]);

return usecallback(function f(...args)

current.timer = settimeout(() => , delay);

})}

const handlevalue = usedebounce(v => )

}, 800)

// console.log()

return handlevalue(v)} />

}

看一下效果,前面是時間戳:

函式防抖和節流(一) 防抖函式

一.什麼是函式防抖?1 概念 函式防抖 debounce 就是指觸發事件後,在延遲時間內函式只能執行一次,如果觸發事件後在延遲時間內又觸發了事件,則會重新計算函式延執行時間。等延遲時間計時完畢,則執行目標 2 例如 坐電梯的時候,如果電梯檢測到有人進來 觸發事件 就會多等待 10 秒,此時如果又有人...

javascript函式防抖

函式防抖是頻繁發生的情況下,當有足夠的空閒時間,才會執行 一次,是優化高頻率執行 的一種手段。實際開發中會遇到頻發觸發事件的情況,比如resize,scroll,mousemove事件。事件觸發 n 秒後執行,如果在這 n 秒內再次觸發,則以新的事件時間為準,n 秒後執行。無論觸發多少次,都要等到最...

防抖與節流方案 函式防抖和節流

在前端開發的過程中,我們經常會需要繫結一些持續觸發的事件,如 resize scroll mousemove 等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢?一般來講,防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...