当前位置: 首页 > 知识库问答 >
问题:

setTimeout使用箭头函数es6进行响应

梁骞仕
2023-03-14

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

谢谢你。

共有3个答案

仲柏
2023-03-14

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

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

建议的答案之所以有效,是因为它既不调用reqMak“now”,也不在以后调用它,就像setTimeout()调用的函数一样。它所做的是传递一个匿名函数()=

毋树
2023-03-14

这个应该可以搞定

const fx = () => this.reqMaq( obj['fkmaqid'] )
timerid = setTimeout( fx, 2000 )
鲁单弓
2023-03-14

试试这个:

if (timerid) {
  clearTimeout(timerid);
}

timerid = setTimeout(() => {
  this.reqMaq(obj['fkmaqid'])
}, 2000);
 类似资料:
  • 新的“胖箭头”符号还可以用更简单的方式来定义匿名函数。 请看下面的例子: console.log(x); incrementedItems.push(x+1); }); 计算一个表达式并返回值的函数可以被定义更简单: 下面代码与上面几乎等价: incrementedItems = items.map(function (x) { return x+1; 让我们在 验

  • 主要内容:1.语法变化,2.带参数的箭头函数,3.带有默认参数的箭头函数,4.带有Rest参数的箭头函数,5.无括号的箭头函数,6.箭头函数的优点ES6中引入了箭头(Arrow)函数,它提供了一种更准确的JavaScript编写方法。 它们让我们能够编写较小的函数语法。 箭头函数的代码更具可读性和结构性。 箭头函数是匿名函数(没有名称且未与标识符绑定的函数)。 它们不返回任何值,并且可以在不使用关键字的情况下进行声明。 箭头函数不能用作构造函数。 箭头函数中的上下文是按词汇或静态方式定义的。 它

  • 本文向大家介绍JavaScript ES6箭头函数使用指南,包括了JavaScript ES6箭头函数使用指南的使用技巧和注意事项,需要的朋友参考一下 胖箭头函数(Fat arrow functions),又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全新特性。有传闻说,箭头函数的语法=>,是受到了CoffeeScript 的影响,并且它与CoffeeScript中的=>语

  • 问题内容: 我是React的新手,正在尝试了解语法。 我正在React 15环境中进行开发(使用react-starterify模板),并且一直在使用下面的VERSION 2中的语法,但是,我在Facebook的React页面上发现的大多数示例和教程都是VERSION 1。这两个,何时应在另一个之上使用? 版本1 版本2 问题答案: 第二个代码是 无状态功能组件, 并且是用于将组件定义为的函数的新

  • 本文向大家介绍ES6箭头函数的特性?相关面试题,主要包含被问及ES6箭头函数的特性?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: ES6 增加了箭头函数,基本语法为 let func = value => value; 相当于 let func = function (value) { return value; }; 箭头函数与普通函数的区别在于: 1、箭头函数没有this,所以需要通

  • 问题内容: class App extends Component { constructor(props) { … } 在类中声明的两种函数 (onChange和onSubmit) 之间有什么区别?如果我将其声明为ES6类方法,但在 const url中 引用this.sate时出现错误,但是将其更改为arrow函数可以解决此问题。 我想知道两种情况下如何正确处理“ this” 另外,我该如何做