时间戳

首页 > 解决方案 > 如果没有其他变化，则在 1 秒后状态发生变化时运行函数 in useeffect

javascript - 如果没有其他变化，则在 1 秒后状态发生变化时运行函数 in useeffect

问题描述

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

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

 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]);

谢谢！

标签： javascriptreactjstypescript

解决方案

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

这个想法是每次发生变化时调用 debounce 函数，但它的实现仅在该函数在一段时间内没有被调用后运行。

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

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])

推荐阅读