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

打赏

共有 0 条评论

Top