前端节约性能的几种常见工具函数

1.节流函数(定时器版)

var throttle = function(fn,interval,immediate) {
  // 保存需要被延迟执行的函数引用
  var _self = fn
  // 定时器
  var timer = null
  // 是否第一次调用 第一次调用不需要延迟
  var firstTime = true
   
  // return 函数体
  return function() {
     var args = arguments
     var content = this
    
     // 第一次调用不需要延迟
      if( firstTime && immediate) {
          _self.apply(content,args) 
          return firstTime = false
      }
      
      // 定时器存在 则证明有任务在执行 也不需要延迟
      if( timer ) {
         return false
      }

      // 开启定时器 延迟执行
      timer = setTimeout(function() {
        // 清除定时器 防止多个定时器 导致的异常
        clearTimeout(timer)
        // timer 置为 null 释放 timer 变量 让垃圾回收机制 进行回收
        timer = null
        // 执行函数
        _self.apply(content,args)
      },interval || 500)
  }
}

2.节流函数(时间戳版)

var throttle = function(fn,interval,immediate) {
  // 保存需要被延迟执行的函数引用
  var _self = fn
  // 当前时间
  var date = new Date()
  var now = date.now()
  // 是否第一次调用 第一次调用不需要延迟
  var firstTime = true
   
  // return 函数体
  return function() {
     var args = arguments
     var content = this
     
     // 第一次调用不需要延迟
      if( firstTime && immediate) {
          _self.apply(content,args) 
          return firstTime = false
      }
      
      // 当前时间小于 现在的时间的 一个interval 函数将不会再被触发
      if( date.now() - now <  (interval || 500)) {
         return false
      }
      // 重新设置当前时间
      now = date.now()
      // 执行函数
      _self.apply(content,args)
  }
}

3.防抖函数

var debounce = function(fn,interval,immediate) {
  // 保存需要被延迟执行的函数引用
  var _self = fn
  // 定时器
  var timer = null
   
  // return 函数体
  return function() {
     var args = arguments
     var content = this

     //  如果有定时器 则证明有任务在执行 则清除队列中的执行的任务 新开辟一个定时器任务
       if(timer) clearTimeout(timer) 
     
      // 是否需要立马执行
      if(immediate) {
            var nowTrigger = !timer
            timer = setTimeout(function() {
                // timer 置为 null 释放 timer 变量 让垃圾回收机制 进行回收
                timer = null
            },interval || 500)
            if(nowTrigger) _self .apply(content,args)
      }else {
           timer = setTimeout(function() {
              // timer 置为 null 释放 timer 变量 让垃圾回收机制 进行回收
              timer = null
              // 执行函数
              _self.apply(content,args)
           },interval || 500)
      }
  }
}

4.分时函数

var timeChunk = function(ary, fn, count,interval) {
 
 var timer = null
    
  //分时加载的主要执行函数
  var start = function() {
    for(var i=0;i< Math.min(count || 1,ary.length);i++) {
      var obj = ary.shift()
      fn(obj)
    }
  }
  
  return function() {
    timer = setInterval(function() {
       if(ary.length === 0) {
            clearInterval(timer)
            return  timer = null
        }
       start()
    },interval || 500)
  }
}

5.惰性加载函数
应用场景 api 兼容判断
功能: 第一次执行判断 往后不再执行判断 并保持正确的结果

  var addEvent = function(elem,type,handler) {
     if(window.addEventListener) {
        addEvent = function(elem,type,handler) {
             elem.addEventListener(type,handler,false)
        }
      }else if(window.attachEvent) {
        addEvent = function(elem,type,handler) {
             elem.attachEvent('on' + type,handler)
        }
      }
      addEvent(elem,type,handler) 
  } 

6.柯里化函数
功能:每次调用接收一定量的参数,但不会返回结果，待真正想得到结果 再将结果返回
应用场景：可用于记账小功能 1号 到 30 号输入消费金额 待30号统一得到 一个人的消费总额

var currying = function(fn) {
        var args = []
        return function() {
            if(arguments.length === 0) {
                return fn.apply(this,args)
            }else {
                [].push.apply(args,arguments)
                return arguments.callee
            }
        }
    }
    var sumMoney = (function() {
        var money = 0
        return function() {
            for(var i=0;i<arguments.length;i++) {
                console.log(arguments,'arguments')
                money = money + arguments[i]
            }
            return money
        }
    })()
    // var cost = currying(sumMoney)
    // console.log(cost(100)(100)())
    // cost(200)
    // cost(200)
    // var c = cost()
    // console.log(c)