防抖和節流及對應的React Hooks封裝
阿新 • • 發佈：2021-02-22
## Debounce
> debounce 原意`消除抖動`，對於事件觸發頻繁的場景，只有最後由程式控制的事件是有效的。
防抖函式，我們需要做的是在一件事觸發的時候設定一個定時器使事件延遲發生，在定時器期間事件再次觸發的話則清除重置定時器，直到定時器到時仍不被清除，事件才真正發生。
```js
const debounce = (fun, delay) => {
let timer;
return (...params) => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fun(...params);
}, delay);
};
};
```
如果事件發生使一個變數頻繁變化，那麼使用`debounce`可以降低修改次數。通過傳入修改函式，獲得一個新的修改函式來使用。
如果是`class`元件，新函式可以掛載到元件`this`上，但是函式式元件區域性變數每次`render`都會建立，`debounce`失去作用，這時需要通過`useRef`來儲存成員函式（下文`throttle`通過`useRef`儲存函式），是不夠便捷的，就有了將`debounce`做成一個`hook`的必要。
```jsx
function useDebounceHook(value, delay) {
const [debounceValue, setDebounceValue] = useState(value);
useEffect(() => {
let timer = setTimeout(() => setDebounceValue(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debounceValue;
}
```
在函式式元件中，可以將目標變數通過`useDebounceHook`轉化一次，只有在滿足`delay`的延遲之後，才會觸發，在`delay`期間的觸發都會重置計時。
配合`useEffect`，在`debounce value`改變之後才會做出一些動作。下面的`text`這個`state`頻繁變化，但是依賴的是`debounceText`，所以引發的`useEffect`回撥函式卻是在指定延遲之後才會觸發。
```jsx
const [text,setText]=useState('');
const debounceText = useDebounceHook(text, 2000);
useEffect(() => {
// ...
console.info("change", debounceText);
}, [debounceText]);
function onChange(evt){
setText(evt.target.value)
}
```
上面一個搜尋框，輸入完成`1`秒（指定延遲）後才觸發搜尋請求，已經達到了防抖的目的。