Reactjs 使用Thattle和Use Effect setTimeout进行搜索有什么不同

发布于02月19日

我正在使用useEffect，它工作得很好，但我被逼着要使用deounce实例.我应该把useEffect变成一个独立的/可重用的函数吗？

const [query, setQuery] = useState('');

useEffect(() => {
    const delayDebounceFn = setTimeout(() => {
      // Perform search operation
      console.log(`Searching for: ${query}`);
   }, 1000); // Delay search by 1 second

  return () => clearTimeout(delayDebounceFn);
}, [query]);

const handleInputChange = (event) => {
    setQuery(event.target.value);
};

推荐答案

回答你的问题:是的.

如果在从属对象更改时要获取或操作数据，则转到useEffect函数

useEffect(<function>, <dependency>)

useEffect(() => {
  //Runs only on the first render
}, []);

useEffect(() => {
   //Runs when the dependent object changes.
}, [dependent object (like queryparameter]);

但在这样的情况下，用户正在输入searchbar，那么将记录的提取延迟到例如微秒是有意义的.

function debounce_leading(func, timeout = 300){
  let timer;
  return (...args) => {
    if (!timer) {
      func.apply(this, args);
    }
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = undefined;
    }, timeout);
  };
}

希望这能有所帮助