throttle含义, 应用场景和原理

• 函数节流(throttle)是指阻止一个函数在很短时间间隔内连续调用. 只有当上一次函数执行后达到规定的时间间隔, 才能进行下一次调用. 但要保证一个累计最小调用时间间隔(例如拖拽类的节流需要有连续效果)
• 函数节流用于onresize, onscroll等短时间内会多次触发的事件
• 函数节流的原理: 使用定时器做时间节流. 当触发一个事件时, 先用setTimeout让这个事件延迟一小段时间在执行. 如果在这个时间间隔内又触发了事件, 就clearTimeout原来的定时器, 在setTimeout一个新的定时器重复以上流程
• 函数节流简单实现:

• function throttle(method, context) {
      clearTimeout(method.tId);
      method.tId = setTimeout(function() {
          method.call(context);
      }, 100);
  }
  
  window.onresize = function() {
      throttle(myFunc, window)
  }
  
  // 封装
  var throttle = function(fn, delay, mustRunDelay){
    var timer = null;
    var t_start;
    return function(){
      var context = this, args = arguments, t_curr = +new Date();
      clearTimeout(timer);
      if(!t_start){
        t_start = t_curr;
      }
      if(t_curr - t_start >= mustRunDelay){
        fn.apply(context, args);
        t_start = t_curr;
      } else {
        timer = setTimeout(function(){
          fn.apply(context, args);
        }, delay);
      }
    };
  };
  
  // 调用（两次间隔50ms内连续触发不执行，但每累计100ms至少执行一次
  window.onresize = throttle(myFunc, 50, 100);