时间戳

首页 > 解决方案 > 为什么 clearTimeout 没有在关闭内关闭超时

javascript - 为什么 clearTimeout 没有在关闭内关闭超时

问题描述

我正在尝试创建一个用于实时搜索的 onChange 闭包，但是，现在它正在为所有输入的内容发出 AJAX 请求，而不是清除超时。我错过了什么？

export function SearchForm({ search, page, btnText, fixPage}) {
  const [term, setTerm] = useState('');
  
  const handleSubmit = (e,term) => {
    e.preventDefault();
    search(term, page);
    fixPage();
    
  }
  
  // const delayedQuery = useCallback(debounce((e,val) => handleSubmit(e,val), 500),[])

  // const handleChange = e => {
  //   const { value } = e.target;
  //   setTerm(value);
  //   delayedQuery(e,value);
  // };

  const handleChange = (timeout => e => {
    const { value } = e.target;
      clearTimeout(timeout);

      timeout = setTimeout(() => {
        handleSubmit(e,value);
      }, 1000);

    setTerm(value);
    })();

  return (
    <form onSubmit={handleSubmit}>
      <input type="text"
             placeholder="Search for a specific company..."
             value={term}
             onChange={handleChange} />

      <button type="submit">Find {btnText}</button>
    </form>
  );
}```

标签： javascriptreactjs

解决方案

在每次渲染时，您都在重新创建，handleChange因此旧的计时器参考不可用。例如，您需要将计时器的引用存储在useRef挂钩中。

这应该有效：

const timerRef = useRef();

const handleChange = (timeout => e => {
const { value } = e.target;
  clearTimeout(timeout);

  timeout = setTimeout(() => {
    handleSubmit(e,value);
  }, 1000);

setTerm(value);
})(timerRef.current);

推荐阅读