react +antd table 滚动事件实现防抖

之前做的项目在使用过程中发现数据有问题,排查了下发现在某次事件触发了两次,立刻想到了防抖,目前问题已解决,代码如下

 componentDidMount() {
  
      document
        .querySelector('.ant-table-body')
        .addEventListener('scroll', this.debounce(this.scrollToEnd, 300) );
     
    }
 debounce=(doLoadMore, wait) =>{ //防抖方法
    var timeout = null;  // 初始化定时器
    return function () {
      if (timeout !== null) clearTimeout(timeout);  // 如果scroll方法反复触发,则清空定时器
      timeout = setTimeout(doLoadMore, wait);  // 如果方法没有反复触发,那么就调用我们判断滚动的方法,然后去调用数据,他就只会请求一次了
    }
  }

你可能感兴趣的:(react.js,javascript,前端)