脚本宝典收集整理的这篇文章主要介绍了React中的setTimeout、setInterval的注意事项,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最近功能需求,在用户输入的一个输入框后,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就好。
解决方法就是不要调用再模块中定义的方法,用匿名函数!!
但是为什么匿名函数就可以,但是在创建的模块中定义的方法就不好用呢?这个原因还在研究,等研究明白了再更新,希望能对大家有帮助!!
以上是脚本宝典为你收集整理的React中的setTimeout、setInterval的注意事项全部内容,希望文章能够帮你解决React中的setTimeout、setInterval的注意事项所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。