Debounce 不会每秒执行一次请求最大值

Question

我有以下组件处理文本搜索。为了减少请求，我正在尝试去抖我的处理程序。我的目标是每秒最多执行一个请求。

以下代码在 value 的每次重新渲染时执行处理程序，但初始延迟为 1000 毫秒。 据我所知，去抖意味着 f.i。 hello，不会对每个字符都执行请求，但是每秒最多执行一次，对吗？

我做错了什么？

const [value, setValue] = useState<string>("");

useEffect(() => {
    handleQuery();
}, [value]);

const handleQuery = debounce(() => {
    console.log(value);
}, 1000);

return (
    <SearchWrapper>
        <SearchBar value={value} onInput={setValue} />
    </SearchWrapper>
);

Answer 1

你实际上不需要 useEffect 去抖动作：

试试改成这样：

const [value, setValue] = useState<string>("");

const handleQuery = debounce((searchText) => {
  console.log(searchText);
}, 1000);

return (
  <SearchWrapper>
    <SearchBar
      value={value}
      onInput={(searchText) => {
        setValue(searchText);
        handleQuery(searchText);
      }}
    />
  </SearchWrapper>
);

Debounce 不会每秒执行一次请求最大值

Debounce won't execute request max once per second

javascript

lodash

reactjs

你实际上不需要 useEffect 去抖动作：