节流函数和函数去抖

被问到一个完全陌生的名词，于是来记录一下。争取以后不忘：）

---

节流函数

目的： 目的就是为了节流函数，从而优化性能。举例：1.连续的dom事件会占用过多的cpu和内存，如ie下的onresize事件，调整浏览器大小时，如果调用了过多的dom事件，就会导致浏览器崩溃；2.常用的搜索框事件。

原理：通过延时来使某段代码不会在短时间内反复执行。
函数节流的基本模式：

var processor = {
  timeoutId: null,
  //实际要执行的代码
  performProcessing: function() {},
  // 初始化处理的方法
  process: function() {
    clearTimeout(this.timeoutId);
    var that = this;
    timeoutId = setTimeout(function() {
      this.performProcessing();
    }, 100)
  }
}

processor.process();

参考 Link1，中的例子尤为精妙，醍醐灌顶。这里就不多赘述了。

但是参考 link 2中
link1 中的 节流函数其实是 debounce，也就是函数去抖，而真正的函数节流 throttle 其实是在一个时间间隔内 不允许发生（相同）， 只能在间隔外发生。这和debounce 的重新设置延时是不一样的。

debounce 如果用手指一直按住一个弹簧，它将不会弹起直到你松手为止。也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。

/**
* 空闲控制 返回函数连续调用时，空闲时间必须大于或等于 idle，action 才会执行
* @param idle   {number}    空闲时间，单位毫秒
* @param action {function}  请求关联函数，实际应用需要调用的函数
* @return {function}    返回客户调用函数
*/
debounce(idle,action)

var debounce = function(idle, action){
  var last
  return function(){
    var ctx = this, args = arguments
    clearTimeout(last)
    last = setTimeout(function(){
        action.apply(ctx, args)
    }, idle)
  }
}

throttle 如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。也就是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

/**
* 频率控制 返回函数连续调用时，action 执行频率限定为 次 / delay
* @param delay  {number}    延迟时间，单位毫秒
* @param action {function}  请求关联函数，实际应用需要调用的函数
* @return {function}    返回客户调用函数
*/
throttle(delay,action)

var throttle = function(delay, action){
  var last = 0return function(){
    var curr = +new Date()
    if (curr - last > delay){
      action.apply(this, arguments)
      last = curr 
    }
  }
}

link2中还有 在underscore 中的解析，同样精妙。

小问题，居然会有这么多名堂。这篇纯属复制粘贴，请移步link12 了解更多

参考资料：link1 link2