停止键入React Js[duplicate]时调用函数

Question

我尝试在停止键入时执行某些操作，我尝试此代码但不工作

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

Answer 1

时间应该超出您的职责范围。

var time;
const handler = (cmp) => {
  clearTimeout(time);
  time = setTimeout(() => {
    console.log(`You typed ${cmp.value}`);
  }, 2000);
}

<input onChange="handler(this)" />

Answer 2

存储超时ID的变量需要在函数外部定义，否则每次调用处理程序时都会得到一个新的未定义变量。

也就是说，你可能正在重新发明轮子。

Answer 3

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

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

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