React中的setTimeout、setInterval的注意事项
发布时间:2020-12-15 07:18:16 所属栏目:百科 来源:网络整理
导读:最近功能需求,在用户输入的一个输入框后,500毫秒触发事件,解决方案很简单,setTimeout嘛...... 代码如下: class A extends React.Component{ handleChange(target){ var that = this; if(this.timer){ clearTimeout(this.timer); } this.timer = setTime
最近功能需求,在用户输入的一个输入框后,500毫秒触发事件,解决方案很简单,setTimeout嘛...... 代码如下: class A extends React.Component{ handleChange(target){ var that = this; if(this.timer){ clearTimeout(this.timer); } this.timer = setTimeout(setTimeoutFun(that,target),500); } setTimeoutFun(_self,_target){ _self.setState({ xxx:_target.value }); _self.timer = null; } render(){ return( <input onChange={this.handleChange} xxxxxx /> ) } } 看似合情合理,但是呢,完全不好用,不是别的不好用,而且完全不会clear,而且每个setTimeout都执行了,这是啥原因呢?想了一想,于是又改了一个写法: class A extends React.Component{ handleChange(target){ var that = this; if(this.timer){ clearTimeout(this.timer); } this.timer = setTimeout(()=>{ that.setState({ xxx:target.value }); },500); } render(){ return( <input onChange={this.handleChange} xxxxxx /> ) } } Bingo!!好用了,setInterval也是同样的道理,别忘记clear就好。 解决方法就是不要调用再模块中定义的方法,用匿名函数!!但是为什么匿名函数就可以,但是在创建的模块中定义的方法就不好用呢?这个原因还在研究,等研究明白了再更新,希望能对大家有帮助!! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |