zoukankan      html  css  js  c++  java
  • 防抖节流

    // fn 是需要节流处理的函数
    // wait 是时间间隔
    function throttle(fn, wait) {
      
      // previous 是上一次执行 fn 的时间
      // timer 是定时器
      let previous = 0, timer = null
      
      // 将 throttle 处理结果当作函数返回
      return function (...args) {
        
        // 获取当前时间,转换成时间戳,单位毫秒
        let now = +new Date()
        
        // ------ 新增部分 start ------ 
        // 判断上次触发的时间和本次触发的时间差是否小于时间间隔
        if (now - previous < wait) {
             // 如果小于,则为本次触发操作设立一个新的定时器
           // 定时器时间结束后执行函数 fn 
           if (timer) clearTimeout(timer)
           timer = setTimeout(() => {
              previous = now
                fn.apply(this, args)
            }, wait)
        // ------ 新增部分 end ------ 
          
        } else {
           // 第一次执行
           // 或者时间间隔超出了设定的时间间隔,执行函数 fn
           previous = now
           fn.apply(this, args)
        }
      }
    }
    
    // DEMO
    // 执行 throttle 函数返回新函数
    const betterFn = throttle(() => console.log('fn 节流执行了'), 1000)
    // 第一次触发 scroll 执行一次 fn,每隔 1 秒后执行一次函数 fn,停止滑动 1 秒后再执行函数 fn
    document.addEventListener('scroll', betterFn)

  • 相关阅读:
    Sqoop的导入及可能遇到的问题
    Docker搭建MongoDB集群(副本分片)
    微信小程序框架部署:mpvue+typescript
    关系型数据库与非关系型数据库
    PWA 学习笔记(五)
    PWA 学习笔记(四)
    PWA 学习笔记(三)
    PWA学习笔记(二)
    PWA 学习笔记(一)
    部分设计模式对比分析
  • 原文地址:https://www.cnblogs.com/bbc66/p/11003527.html
Copyright © 2011-2022 走看看