停止输入 React Js 时调用函数 [重复]答案

【问题标题】：Call function when stop typing React Js [duplicate]停止输入 React Js 时调用函数 [重复]
【发布时间】：2021-08-20 00:33:47
【问题描述】：

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

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

【问题讨论】：

你到底想做什么？
您想等待2s 触发功能，或者在您刚停止输入后不久
当用户停止输入@isaacsan123 时，我尝试运行一个函数
在停止输入@CrispenGari 后不久

标签： javascript reactjs next.js

【解决方案1】：

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

也就是说，you are probably reinventing the wheel。

【讨论】：

你能给我示例代码吗？我尝试了很多教程但还是看不懂
将let time;移到函数外。两排。
鉴于这是 React，不会在组件重新渲染时重新声明时间变量，从而使 clearTimeout 没有 id 吗？
会，但处理函数不会触发重新渲染。

【解决方案2】：

如果在 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}/>

【讨论】：

【解决方案3】：

time 应该在你的函数之外。

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

&lt;input onChange="handler(this)" /&gt;

另外，2 秒似乎有点长。

【讨论】：

【解决方案4】：

我知道有更好的方法，但现在试试这个。

const [typing, setTyping] = useState(true)
useEffect(() =>{
if(! typing){
console.log("stop typing")
} 
}, [typing] ) 
const handleKeyUp =() =>{
   setTyping(true) 
     setTimeout(()=>{
       setTyping(false) 
}, 100) 
} 
<input onChange={handler} onKeyup={handleKeyUp}/>

【讨论】：

【解决方案5】：

您可以使用 ref 来跟踪计时器。这应该保持对重新渲染的引用，并且不会导致组件的额外重新渲染。

const Typing = () => {
  const timer = React.useRef();
  
  const handler = (e) => {
    clearTimeout(timer.current);
    timer.current = setTimeout(() => {
       console.log("Typed: " + e.target.value);
    }, 2000);
  }
  
  return <input onChange={handler} />;
};

const App = () => <Typing />;
ReactDOM.render(<App />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

【讨论】：