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就好。