Menu
I'd like to know how to use setTimeout() on ReactJS, because I'm doing this:
timerid = setTimeout( () => this.reqMaq( obj['fkmaqid'] ), 2000 ) and it calls twice the function this.reqMaq().
How do I prevent the first call? and just keep the call after the time?
Here it's the Component:
reqMaq (maqid) { return fetch(`/scamp/index.php/batchprodpry/${maqid}`, {credentials: 'same-origin'}) .then(req => { if (req.status >= 400) { throw new Error("Bad response from server") } return req.json() }) .then(json => this.processMaqReq(json)) .catch(function(error) { console.log('request failed', error) }) } handleChangeMaq (event) { event.preventDefault() if (event.target.value.length > 0) { let obj = this.state.obj obj['fkmaqid'] = VMasker.toPattern(event.target.value, "99-99-99-99") // if (timerid) { // clearTimeout(timerid) // } // timerid = setTimeout(() => { // if (!isRunning) { // this.reqMaq(obj['fkmaqid']) // } // }, 2000) const fx = () => this.reqMaq( obj['fkmaqid'] ) timerid = setTimeout( fx, 2000 ) this.setState({ obj: obj }) } } render() { return ( <div className="form-group"> <label htmlFor="maquina">Máquina</label> <input type="text" className="form-control" id="maquina" name="maquina" placeholder="Maquina" value={this.state.obj['fkmaqid'] || ''} onChange={this.handleChangeMaq} ref={node => { input1 = node }} required="required" /> </div> ) } Thank you.
671
The function we pass as an argument to setTimeout is called an anonymous function because it doesn't have a name. ES6 has introduced a slightly different syntax to define anonymous functions called the fat arrow syntax, with it we can re-write the above as: Copy setTimeout(() => { console. log("setTimeout called!")
Using setTimeout in React Components We'll call setTimeout inside of the useEffect Hook, which is the equivalent of the componentDidMount lifecycle method in Class components. import React, { useEffect } from 'react'; const App = () => { useEffect(() => { const timer = setTimeout(() => { setCount('Timeout called!'
setTimeout() is an asynchronous function, meaning that the timer function will not pause execution of other functions in the functions stack. In other words, you cannot use setTimeout() to create a "pause" before the next function in the function stack fires.
Try this:
if (timerid) { clearTimeout(timerid); } timerid = setTimeout(() => { this.reqMaq(obj['fkmaqid']) }, 2000); This should do the trick
const fx = () => this.reqMaq( obj['fkmaqid'] ) timerid = setTimeout( fx, 2000 ) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
