需要進行頁面防抖是前端編程時經常遇到的問題了。如果不太了解什么是防抖的話，可以參考淺談 JS 防抖和節流。

這篇文章，我們分別用傳統方式來實現防抖和用Hook方式實現防抖。

傳統方式

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()

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

Hook方式

使用Hook方式來實現防抖和傳統方式背后思想是一樣的，只不過是用Hook的方法來實現。下面我們來實現自定義Hook：

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

使用的時候可以寫成這樣：

const debounceParam = useDebounce(param, 2000)

就自動獲得延遲2s之后的數據

總結

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

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