throttle节流函数

星星chok

已于 2024-07-26 16:19:45 修改

阅读量282

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

于 2021-07-09 15:51:38 首次发布

本文链接：https://blog.csdn.net/qq_38985444/article/details/118218934

本文将详细讲解JavaScript中的节流函数throttle的工作原理和使用方法，通过实例阐述如何实现函数在指定时间间隔内仅执行一次，忽略后续的调用请求，直到时间间隔结束。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

深入浅出节流函数 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),