import {useEffect, useRef, useState} from "react";
import {useEffect, useRef, useState} from "react";
export const useThrottle = (state, timeout) => {
    // 計時器引用
    const timeoutRef = useRef(null);
    // 計時器執(zhí)行結(jié)束
    const existTimeOut = useRef(false);
    // 節(jié)流值
    const [throttleValue, setThrottleValue] = useState(state);
    useEffect(()=>{
        // 存在定時器
        if (existTimeOut.current){
            return;
        }
        existTimeOut.current = true;
        // 設(shè)置節(jié)流值
        timeoutRef.current = setTimeout(()=>{
            setThrottleValue(state);
            existTimeOut.current = false;
        }, timeout)
    },[state])
    return throttleValue;
}

import './App.css';
import {useEffect, useState} from "react";
import {useThrottle} from "./demo/UseRefDemo";
const App =()=>{
    const [state, setState] = useState('')
    const throttleState = useThrottle(state, 10000);
    useEffect(()=>{
        console.log('延遲執(zhí)行:' + throttleState);
    }, [throttleState])
    return <>
         用戶名: <input type='text' value={state} onChange={(e)=> setState(e.target.value)}/>
    </>
}
export  default App

export default function Form() {
  const inputRef = useRef(null);
  function handleClick() {
    inputRef.current.focus();
  }
  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        聚焦輸入框
      </button>
    </>
  );
}