// func 需要去抖動(dòng)的函數(shù)  delay 延時(shí)執(zhí)行時(shí)間
const debounce = (func, delay) => {
    let timeout;
    //...param es6語(yǔ)法  獲取形參數(shù)組 argaments
    return (...param) => {
    	// 每次 進(jìn)入清除上一個(gè)已經(jīng)執(zhí)行/未執(zhí)行的定時(shí)器
        if (timeout) {
            clearTimeout(timeout);
        }
        //定時(shí)器 delay 時(shí)間后執(zhí)行 func函數(shù)
        timeout = setTimeout(() => {
            func(...param);
        }, delay)
    }
}
// 使用
const logPrint= debounce(() =>console.log('打印執(zhí)行'),2000)
logPrint(); //
logPrint(); //
logPrint(); //
logPrint(); // 打印執(zhí)行

//utils/index.js
import { useEffect, useState } from 'react';
export const useDebounce = (value, delay) => {
    const [deouncedValue, setDebuouncedValue] = useState(value)
    useEffect(() => {
        //每次在value變化以后，設(shè)置一個(gè)定時(shí)器
        const timeout = setTimeout(() => setDebuouncedValue(value), delay)
        //每次在上一個(gè)useEffect處理完以后再運(yùn)行
        return () => clearTimeout(timeout)
    }, [value, delay])
    return deouncedValue
}

//使用 index.jsx
import {  useDebounce } from 'utils';
......
const [param, setParam] = useState({
    name: '',
    personId: ''
});
const debounceParam = useDebounce(param, 2000);
  useEffect(() => {
  	console.log('打印執(zhí)行',debounceParam);
    // fetch(`${apiUrl}/projects?${qs.stringify(cleanObject(debounceParam))}`).then(async response => {
    //   if (response.ok) {
    //     setList(await response.json());
    //   }
  }, [debounceParam]);
return(
	<input
	   type="text"
	   value={param.name}
	   onChange={evt =>
	     setParam({
	       ...param,
	       name: evt.target.value
	     })
	   }
	 />
)