需要進(jìn)行頁面防抖是前端編程時(shí)經(jīng)常遇到的問題了。如果不太了解什么是防抖的話，可以參考淺談 JS 防抖和節(jié)流。

這篇文章，我們分別用傳統(tǒng)方式來實(shí)現(xiàn)防抖和用Hook方式實(shí)現(xiàn)防抖。

傳統(tǒng)方式

const debounce = (func, delay) => {let timeoutreturn () => {if (timeout) {clearTimeout(timeout)}timeout = setTimeout(function() {func()}, delay)} } const log = debounce(() => console.log('call'), 5000) log() log() log()

這是傳統(tǒng)方式來實(shí)現(xiàn)防抖，核心原理就是每次都清除上一個(gè)定時(shí)器然后再添加新的定時(shí)器。所以，無論之前執(zhí)行了多少次log()，實(shí)際只有最后一個(gè)log()生效。

Hook方式

使用Hook方式來實(shí)現(xiàn)防抖和傳統(tǒng)方式背后思想是一樣的，只不過是用Hook的方法來實(shí)現(xiàn)。下面我們來實(shí)現(xiàn)自定義Hook：

export const useDebounce = (value, delay) => {const [debounceValue, setDebounceValue] = useState(value)useEffect(() => {// 每次在value和delay變化以后都會(huì)設(shè)置一個(gè)新的定時(shí)器const timeout = setTimeout(() => setDebounceValue(value), delay)return () => clearTimeout(timeout)}, [value, delay])return debounceValue }

使用的時(shí)候可以寫成這樣：

const debounceParam = useDebounce(param, 2000)

就自動(dòng)獲得延遲2s之后的數(shù)據(jù)

總結(jié)

以上是生活随笔為你收集整理的用Hook的方式实现防抖的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。