疑惑的背景

我用react做了一個scroll to top 的button. 在查詢onScroll資料的時候看到了這篇文章.從例子來看防抖動就是集齊所需再發(fā)送請求，節(jié)流就是定時刷新，不知道這樣理解對不？恰好此文章第一個例子和我自定義的scroll to top button很相似。我寫的demo里觸發(fā)了很多次state，我覺的這樣是不對的，但是也沒有好的解決方法。

疑惑的問題

• 我寫的這個demo, 有沒有缺陷，比如多次修改state可能會導致的隱形問題，生命周期。。

• 防抖動和節(jié)流的好處從那篇文章里我知曉一二，但仍舊迷糊什么時候需要防抖動或者節(jié)流。

代碼片段

class ScrollToTopButton extends Component{
    constructor(...args) {
        super(...args);
        var that = this;
        this.state = {
            interval: 0
        };

        this.scrollStep = () => {

            if (window.pageYOffset === 0) {
                clearInterval(this.state.interval);
            
            }
            window.scroll(0, window.pageYOffset - 50);

            console.log(this.state.interval);
        }


        this.handleScroll = (interval) => {
            let intervalTime = setInterval(this.scrollStep.bind(this), interval);
            this.setState({interval: intervalTime});

        }

    }
    componentWillMount() {

    }
    componentDidMount(){

    }



    render(){
        return(
            <div className="scrollComponent" onClick={()=>{this.handleScroll(20)}}>
                <span className='fa-stack'>
                    <Fontawesome name="chevron-circle-up" stack='1x'></Fontawesome>
                </span>
            </div>
        )
    }
}

export default ScrollToTopButton;

第一次 scroll to top 打印出來的this.state.interval

多次點擊 scroll to top 打印出來的this.state.interval

我想的解決辦法

this.scrollStep = () => {

            if (window.pageYOffset === 0) {
                clearInterval(this.state.interval);
                
                // new add
                this.setState({interval:0});
            }
            window.scroll(0, window.pageYOffset - 50);

            console.log(this.state.interval);
        }

但終覺這個不是最終解決辦法。可能自己寫的demo有缺陷。 能力有限還希望前輩們指教一下。