Call function when stop typing React Js

Question

I try do something when stop typing, I try this code but not working

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

You want to wait for `2s` to trigger a function or just soon after you just stopped typing — crispengari, Jun 01 '21 at 19:54

score 2 · Answer 1 · answered Jun 01 '21 at 19:58

I assume you want to cancel the timer if there is more input within 2 seconds. At present, your time variable is scoped to the handler function, so the value is lost when the function finishes executing.

Try using state to keep track of your timer:

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

score 0 · Answer 2 · answered Jun 01 '21 at 19:55

0

The variable you store the timeout ID in needs to be defined outside the function, otherwise you get a new, undefined variable each time the handler is called.

That said, you are probably reinventing the wheel.

answered Jun 01 '21 at 19:55

Quentin

857,932
118
1,152
1,264

can you give me the example code ?, I try so many tutorial but still can't understand – just test Jun 01 '21 at 19:56
Move `let time;` outside the function. Two lines up. – Quentin Jun 01 '21 at 19:57
Given this is React won't the time variable be redeclared on component rerender, leaving clearTimeout without an id? – Ben Stephens Jun 01 '21 at 20:03
It would, but the handler function doesn't trigger a rerender. – Quentin Jun 01 '21 at 20:05

score 0 · Answer 3 · answered Jun 01 '21 at 20:00

time should be outside your function.

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

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

Also, 2 seconds seems a bit long.

score 0 · Answer 4 · answered Jun 01 '21 at 20:07

I know there's a better way of doing it but for now try this.

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}/>

score 0 · Answer 5 · answered Jun 01 '21 at 20:13

You can use a ref to keep track of the timer. This should keep the reference over re-renders and not cause additional re-renders of the component.

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>

Call function when stop typing React Js

5 Answers5