react防抖

import { Input } from "antd";
import React, { useCallback, useState } from "react";

const A = () => {
  const [input, setInput] = useState("");

  // 定义一个防抖函数
  const debounce = (fn, delay) => {
    let timeout;
    return function (...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        fn(...args);
      }, delay);
    };
  };

  const handleInputChange = (e) => {
    const { value } = e.target;
    setInput(value);
    debouncedGetData(value); // 调用防抖函数
  };

  // 使用 debounce 包装处理函数
  const debouncedGetData = useCallback(
    debounce((value) => {
      console.log(value);
    }, 1000),
    []
  );
  return (
    <div>
      <Input value={input} onChange={handleInputChange} />
    </div>
  );
};

export default A;