setTimeout ReactJS with arrow function es6

Question

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&aacute;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.

There must be some other context; on its own, this will call it once after 2s. Are you doing it in a lifecycle event? render method? Etc. — Dave Newton
– Dave Newton, Commented Aug 16, 2016 at 14:05
That setTimeout is being called on a onChange over a form field. What do you suggest? is it because of that? — Rafael Mora
– Rafael Mora, Commented Aug 16, 2016 at 14:07
Your problem is not this code, it's the method that holds this code and any other code that calls that method. Based only on what you've told us here, the simplest solution is to use a flag isRunning, which you set to true when you start the timer, set to false when your timer ends, and don't allow starting of the timer unless isRunning is false — nem035
– nem035, Commented Aug 16, 2016 at 14:39

Mehdi Namvar · Accepted Answer · 2016-08-16 14:20:24Z

65

Try this:

if (timerid) {
  clearTimeout(timerid);
}

timerid = setTimeout(() => {
  this.reqMaq(obj['fkmaqid'])
}, 2000);

answered Aug 16, 2016 at 14:20

Mehdi Namvar

1,1518 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rafael Mora Over a year ago

I had to declare a var in the state and then use it in the method where the setTimeout() resides

Simone Poggi Over a year ago

If I get it right you want to debounce the execution of the reqMaq function, but currently you are only delaying it, so if you type two letters you will run that function twice. Take a look at this stackoverflow.com/questions/23123138/…

Simone Poggi · Accepted Answer · 2016-08-16 15:01:03Z

3

This should do the trick

const fx = () => this.reqMaq( obj['fkmaqid'] )
timerid = setTimeout( fx, 2000 )

answered Aug 16, 2016 at 15:01

Simone Poggi

1,4782 gold badges15 silver badges34 bronze badges

1 Comment

Simone Poggi Over a year ago

You should consider to include the full code of the component then, because the problem is not here

Stephen Rauch · Accepted Answer · 2018-04-25 01:41:02Z

0

The reason that this.reqMak() is being called twice is subtle.

In your example you use an actual call to reqMak to delineate your function pointer for setTimeout(). The first time it is called is when you set up setTimeout; the second time is when setTimeout() runs, 2 seconds later.

The reason the suggested answer works is that it neither calls reqMak 'now', nor calls it later, as the function called by setTimeout(). What it does do is pass an anonymous function ()=>{} to setTimeout() for running later. And when setTimeout() runs the function, 2 seconds later, the anonymous function calls this.reqMak(), once.

edited Apr 25, 2018 at 1:41

Stephen Rauch♦

50.1k32 gold badges118 silver badges143 bronze badges

answered Apr 25, 2018 at 1:22

James Huddle

375 bronze badges

Collectives™ on Stack Overflow

setTimeout ReactJS with arrow function es6

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related