函数节流

函数节流，简单地讲，就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。以impress上面的例子讲，就是让缩放内容的操作在你不断改变窗口大小的时候不会执行，只有你停下来一会儿，才会开始执行。

• 原理
  定时器。当我触发一个事件时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行，就这样。

• 代码实现

  function throttle(method,context){
    clearTimeout(method.tid);
    method.tid = setTimeout(function(){
      method.call(context);
    },100);
  }
  
  //调用的时候
  window.onresize=function(){
    throttle(myFunc);
  }

• impress方法实现

  //闭包封装，让等待时间成为一个变量
  var throttle = function(fn,delay){
    var timer = null;
    return function(){
      var context = this, args = arguments;   //闭包中传递参数
      clearTimeout(timer);
      timer = setTimeout(function(){
        fn.apply(context,args);
      },delay);
    };
  };
  
  //调用
  window.onresize = throttle(myFunc,100);
  

• 深化函数节流
  函数节流让一个函数只有在你不断触发后停下来歇会才开始执行，中间你操作得太快它直接无视你。这样做就有点太绝了
  深化就是每隔一定的时间，不管你是否还在继续拖拽，都会执行resize，让用户得到响应。（楼主最近的用户界面课刚考完试，系统的反馈对用户来说是相当重要滴，直接影响到用户是否会继续使用的问题）

  var throttle = function(fn,delay,mustRunDelay){
    var timer = null;
    var time_start;
    return function(){
      var context = this,args = arguments,time_current = +new Date();
      clearTimeout(timer);
      if(!time_start){
        time_start = time_current;
      }
      if(time_current - time_start >= mustRunDelay){
        fn.apply(context,args);
        time_start = time_current;   //执行完之后，要将start的值设为当前时间开始计算
      }
      else{
        timer = setTimeout(function(){
          fn.apply(context,args);
        },delay);
      }
    };
  };
  
  
  //调用
  window.onresize  = throttle(myFunc,50,100);   //每隔100ms都会执行一次