javascript - 停止输入 React Js 时调用函数

Question

我在停止打字时尝试做一些事情，我尝试这段代码但不工作

const handler=(e)=>{
  let time;
  clearTimeout(time);
  time = setTimeout(() => {
     console.log("click");
  }, 2000);
}
<input onChange={handler}/>

标签： javascriptreactjsnext.js

Answer 1

如果在 2 秒内有更多输入，我假设您想取消计时器。目前，您的 time 变量的作用域是处理函数，因此当函数完成执行时该值会丢失。

尝试使用状态来跟踪您的计时器：

const [timerID, setTimerID] = useState(null);
  
const handler = (e) => {
  clearTimeout(timerID);
  const id = setTimeout(() => console.log("click"), 2000);
  setTimerID(id)
}
  
return <input onChange={handler}/>