React 組件 JS 中的去抖動

Question

我正在為輸入組件編寫一個簡單的去抖動 function

export const debounce = (func, wait) => {
    let timeout
    return function (...args) {
        if (timeout) {
            clearTimeout(timeout)
        }
        timeout = setTimeout(() => {
            timeout = null
            Reflect.apply(func, this, args)
        }, wait)
    }
}

它從外部文件導入，並用作 React 組件（Hooks）中input onKeyUp 處理程序的包裝

const handleChange = debounce(() => console.log("test"), 1000)

問題：每次當input中的文本發生變化時，我都會收到“測試”日志，而不僅僅是一個 - 正如預期的那樣。

我究竟做錯了什么？

Answer 1

我不確定您的代碼有什么問題，但這是一個可以使用掛鈎的版本

import { useEffect, useState } from "react";

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
};

export default useDebounce;

然后你用它作為

const debouncedValue = useDebounce(inputValue, delay);