下拉加载更多 防抖处理（react 封装防抖函数）

** 关于防抖 
Q : 什么是防抖
A : 触发事件后在x秒内函数只能执行一次，如果在x秒内又触发了该事件，就会重新开始计时

Q : 为什么要用防抖？
A : 当前的场景是用户下拉触底加载更多数据，不可能在用户滑动过程中满足条件了就是请求后台数据 ， 这样会对后台造成压力， 也会出现一些冗余数据 。

Q : 效果
A : 用户在下拉满足触底加载更多条件时   ，x秒内没有再次触发，才会加载更多数据

话不多说   ，看代码~~

​
this.state = {
    timer : null //用state保存计时器的状态 ， 也可以把timer理解成一个全局变量
}

//页面加载完成时添加屏幕滚动事件
componentDidMount(){
      window.onscroll = this.bindScroll
}


//离开当前页面时移除事件
componentWillUnmount(){
    window.onscroll = null;
  }


//滚动函数
bindScroll(){
    let clientHeight = document.documentElement.clientHeight; //视口的高度
    let scrollHeight = document.documentElement.scrollHeight; //文档的高度
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 

      let func = ()=>{
        if(scrollTop > scrollHeight -  clientHeight -30){//滚动到距离页面底部30px内触发
           this.getData()//获取数据
        }
      }
      debounce(func, 2000,'timer',this)()  //调用封装的防抖函数

  }



​

//针对react封装的防抖函数

/*
    参数说明
    --func 定时器触发函数  
    --delay 延迟
    --timerName  储存定时器timer的 state名
    --_this 调用传递过来的this , 指向react组件
  */
export const debounce = (func, delay,timerName,_this) => {
    return  () => {
        _this.setState((provious)=>{
          let timer = provious[timerName]
          timer && clearTimeout(timer); //清除定时器 ， 重新绑定一个定时器  ， delay内没有再次触发时func才会执行
            return {
              timer : setTimeout(func,delay)
            }
        })
    };
  }