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

【问题标题】：Debounce won't execute request max once per secondDebounce 不会每秒执行一次最大请求
【发布时间】：2021-09-03 12:34:04
【问题描述】：

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

以下代码在 value 的每次重新渲染时执行处理程序，但初始延迟为 1000 毫秒。 AFAIK 去抖意味着对于 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>
);

【问题讨论】：

为什么不在文本输入中直接调用handleQuery？
@RyanLe 我不完全确定你的意思，但因为我需要立即更新值来设置各自的输入值
我明白了，试试我的答案，如果它适合你。在这种情况下使用useEffect 可能会导致一些异步操作。
请求不会针对每个字符执行，但最多每秒执行一次，对吧。 debounce - 等到用户停止输入 X 秒，然后发送请求。油门 - 仅每 X 秒执行一次请求。通常最好使用 debounce 进行搜索，这样你只会得到一个请求。澄清一下，这就是你想要的？

标签： javascript reactjs lodash

【解决方案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>
);

【讨论】：

谢谢！你把我引向了正确的方向——我实际上还需要用useCallback 钩子来包装去抖动函数以使其工作——我假设由value 引起的重新渲染带来了一些差异：const debouncedFunc = useCallback(debounce(handleQuery, 1000), [])