throttle节流函数

深入浅出节流函数 throttle
函数节流指的是某个函数在一定时间间隔内（例如 3 秒）只执行一次，在这 3 秒内 无视后来产生的函数调用请求，也不会延长时间间隔。3 秒间隔结束后第一次遇到新的函数调用会触发执行，然后在这新的 3 秒内依旧无视后来产生的函数调用请求，以此类推。

/**函数节流方法
 * @param Function fn 延时调用函数
 * @param Number dalay 延迟多长时间
 * @param Number atleast 至少多长时间触发一次
 * @return Function 延迟执行的方法
 */
function throttle(fn, delay, atleast) {
  let timer = null
  let previous = null
  return function() {
    var now = +new Date()
    if (!previous) previous = now
    if (atleast && now - previous > atleast) {
      fn()
      // 重置上一次开始时间为本次结束时间
      previous = now
      clearTimeout(timer)
    } else {
      clearTimeout(timer)
      timer = setTimeout(function() {
        fn()
        previous = null
      }, delay)
    }
  }
}

1使用

 // 滚动加载数据
    handleScroll() {
      // scrollTop 滚动区域距离顶部高度
      // clientHeight 滚动区局自身高度
      // scrollHeight 滚动列表总高度
      if (!this.$refs.mediaContentWrapper) return
      if (
        this.$refs.mediaContentWrapper.scrollTop +
          this.$refs.mediaContentWrapper.clientHeight >=
        this.$refs.mediaContentWrapper.scrollHeight
      ) {
        // 当总条数大于 当前页码*每页条数 表示未到最后页 继续加载数据
        if (
          this.mediaPagination.total <=
          this.mediaPagination.pageNum * this.mediaPagination.pageSize
        ) {
          this.isLoaded = true
          return
        }
        this.$emit("loadData")
      }
    },
    
 //使用
 this.throttle(this.handleScroll, 500),