带有箭头函数 es6 的 setTimeout ReactJS答案

【问题标题】：setTimeout ReactJS with arrow function es6带有箭头函数 es6 的 setTimeout ReactJS
【发布时间】：2016-12-22 22:47:58
【问题描述】：

我想知道如何在 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>
    )
  }

谢谢。

【问题讨论】：

为什么会被调用两次？你在初始化时调用它吗？
肯定有其他的上下文；就其本身而言，这将在 2 秒后调用它一次。您是否在生命周期事件中这样做？ render 方法？等等。
setTimeout 在表单域上的 onChange 上被调用。你有什么建议？是因为这个吗？
我不会在初始化时调用它。我打电话给onChange
您的问题不在于这段代码，而在于保存这段代码的方法以及调用该方法的任何其他代码。仅基于您在这里告诉我们的内容，最简单的解决方案是使用标志isRunning，当您启动计时器时将其设置为true，当您的计时器结束时设置为false，并且不要除非isRunning 为假，否则允许启动计时器

标签： javascript reactjs settimeout

【解决方案1】：

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

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

建议的答案有效的原因是它既不调用reqMak“现在”，也不像setTimeout()调用的函数那样稍后调用它。它所做的是将匿名函数()=>{} 传递给setTimeout() 以便稍后运行。而当setTimeout() 运行函数时，2 秒后，匿名函数调用this.reqMak() 一次。

【讨论】：

【解决方案2】：

这应该可以解决问题

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

【讨论】：

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

【解决方案3】：

试试这个：

if (timerid) {
  clearTimeout(timerid);
}

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

【讨论】：

我必须在state 中声明一个var，然后在setTimeout() 所在的方法中使用它
如果我猜对了，您希望消除 reqMaq 函数的执行，但目前您只是在延迟它，因此如果您键入两个字母，您将运行该函数两次。看看这个stackoverflow.com/questions/23123138/…