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)

  • 相关阅读:
    解决ORACLE存储过程锁定的问题
    #{propName,attr1=val1,attr2=val2}
    集成confluence与jira
    jira4.1.1安装
    Mac OS X 10.6下安装MySQL 5.1.45
    JIRA+MySQL配置
    xcode4.5 iOS6 cocos2dx 横屏解决方案
    gSoap
    Jira5.0.2安装及破解
    MFC中显示cocos2dx
  • 原文地址:https://www.cnblogs.com/bbc66/p/11003527.html
Copyright © 2011-2022 走看看