运行 function 在 state 在 1 秒后更改时生效，如果没有其他更改

Question

我正在尝试创建一个搜索栏，该搜索栏向我的服务器发送请求以在用户写入时给出结果。 如果他/她写得很快，一旦用户写了就发送请求似乎有点不切实际，所以我想在 useEffect 钩子中使用 function 如果没有输入，则在 1 秒后处理此运行，并且每次用户输入内容时重置该计时器。

代码目前是这样工作的，但我想添加上述功能，但我真的不知道 go 将如何做到这一点。 有人对此有解决方案吗？

 React.useEffect(() => {
      if (input.length > 1) {

        (async () => {
          try {
            setLoading(true);
            const res = await axiosget<Searchresult[]>(
              `search/input=${input}`
            );

            setSearchresults(res);
          } catch {
            setSearchResults([]);
          }
          setLoading(false);
        })();
      } else {
        setSearchResults([]);
      }

  }, [input]);

谢谢！

Answer 1

您正在描述“去抖动”function。 我会使用提供此功能的众多库之一，或者至少将您自己的实现抽象为 function 以通用方式处理去抖动。

这个想法是每次发生变化时都调用去抖动 function，但它的实现仅在function 在一段时间内没有被调用之后运行。

然后你可以做类似的事情：

const doSearch = useCallback(
  debounce(async (input: string) => {
    try {
      setLoading(true)
      const res = await axios.get<Searchresult[]>(`search/input=${input}`)

      setSearchresults(res)
    } catch {
      setSearchResults([])
    }
    setLoading(false)
  }, 500), // 500ms is the debounce threshold
  [],
)

React.useEffect(() => {
  if (input.length > 1) {
    doSearch()
  } else {
    setSearchResults([])
  }
}, [input, doSearch])