vue2 实现滚动条scroll 数据懒加载

在做滚动条数据懒加载的时候，我遇到了一触底然后就多次调用接口的情况，随后了解到了函数防抖和函数节流这两个概念，这里我们需要使用到函数节流这个东西，在一定时间内只执行一次请求
函数防抖一般是用在事件上，比如：查询团队名是否重复，那你需要等待用户输入完团队名才能查询，不然就是浪费请求资源，函数节流也是同理。
所以：vue2+addEventListener+throttle(函数防抖)
this.$nextTick在下次DOM更新循环结束之后执行延迟回调

this.$nextTick(() => {
		// 这个this.reDraw 我也不知道是啥
      this.reDraw = this.throttle(this.historicalMessagesHandleScroll, 500, 1000)
      // 在data上定义的参数这里就不贴上去了
      this.scrollElement = document.getElementById('historicalMessages')
      // 绑定滚动事件
      this.scrollElement.addEventListener('scroll',this.reDraw , true)
    })

// 简单的节流函数
    throttle(func, wait, mustRun) {
      let timeout,
        startTime = new Date()

      return function() {
        let context = this,
          args = arguments,
          curTime = new Date()

        clearTimeout(timeout)
        // 如果达到了规定的触发时间间隔，触发 handler
        if (curTime - startTime >= mustRun) {
          func.apply(context, args)
          startTime = curTime
          // 没达到触发间隔，重新设定定时器
        } else {
          timeout = setTimeout(func, wait)
        }
      }
    }

historicalMessagesHandleScroll(e) {
     //  滚动的像素+容器的高度>可滚动的总高度-100像素
      if (e.srcElement.scrollTop + e.srcElement.offsetHeight >= e.srcElement.scrollHeight) {
        // TODO 数据加载...
        dosomething...
      }
    }

这里你注意document.getElementById的时候是要找你的容器比如div这种把你的内容包裹起来的这种dom，不然浏览器会报错找不到addEventListener这个方法
this.reDraw有大佬知道这个的可以在评论区指出，这里就是做个记录