在一些点击操作场景时，用户可能手误多次点击，就会造成发多次请求的情况。为了避免这种情况，我们需要等待此轮请求发送完毕后，再可以下次点击。

    1. const sleep = (ms)=> new Promise((resolve) => setTimeout(()=> resolve(1), ms))
    4. const useLockFn = async (fn)=>{
    5.     const flag = React.useRef(false)
    6.     const flagRef = flag.current
    7.     // 运用闭包特性，返回一个新函数并执行fn返回结果
    8.     return React.useCallback(async (...args)=>{
    9.       if(flagRef) return;
    10.       flagRef = true
    11.       try{
    12.         const res = await fn(...args)
    13.         flagRef = false
    14.         return res
    15.       }catch(e){
    16.         flagRef = false
    17.         throw e
    18.       }
    19.     },[fn])
    20. }
    23. export default function App() {
    25.   const fn = useLockFn(async ()=>{
    26.     const res =  await sleep(1000)
    27.   })
    29.   return (
    30.     <div className="App">
    31.       <button onClick={fn}}>关注</button>
    32.     </div>
    33.   );
    34. }