使用箭头函数ES6设置ReactJS的setTimeout

Question

我想知道在ReactJS中如何使用setTimeout()，因为我正在做这个：

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

并且它调用了函数this.reqMaq()两次。

我如何防止第一次调用？只保留时间后的调用?

这是组件：

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

谢谢。

- Rafael Mora

---

为什么要调用两次？你在初始化时调用它吗？ - Olivier Boissé

我不是在初始化时调用它，而是在“onChange”上调用它。 - Rafael Mora

你的问题不在于这段代码，而是包含这段代码的方法以及调用该方法的任何其他代码。仅根据你在这里提供的信息，最简单的解决方案是使用一个标志 isRunning，当你启动计时器时将其设置为 true，当计时器结束时将其设置为 false，并且除非 isRunning 为 false，否则不允许启动计时器。 - nem035

@RafaelMora 请提供您的React组件的完整代码。 - Olivier Boissé

@Daenu 我也尝试了那个方法，但并没有起作用。谢谢。 - Rafael Mora

Answer 1

试试这个：

if (timerid) {
  clearTimeout(timerid);
}

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

- Mehdi Namvar

---

我必须在state中声明一个变量，然后在包含setTimeout()的方法中使用它。 - Rafael Mora

如果我理解正确的话，您想要防抖执行reqMaq函数，但目前您只是延迟了它，所以如果您输入两个字母，将会运行该函数两次。请查看此链接：https://dev59.com/M2Ag5IYBdhLWcg3w1t5a - Simone Poggi

Answer 2

这应该可以解决问题。

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

- Simone Poggi

---

你应该考虑包含组件的完整代码，因为问题不在这里。 - Simone Poggi

Answer 3

this.reqMak() 被调用两次的原因是微妙的。

在您的示例中，您使用实际调用 reqMak 来划分 setTimeout() 的函数指针。第一次调用是在设置 setTimeout 时；第二次是在 setTimeout() 运行 2 秒后。

建议的答案之所以有效，是因为它既不立即调用 reqMak，也不将其作为由 setTimeout() 调用的函数稍后调用。它所做的是将一个匿名函数 ()=>{} 传递给 setTimeout() 以便稍后运行。当 setTimeout() 运行该函数 2 秒后，匿名函数会调用 this.reqMak() 一次。

- James Huddle