【JS】节流和防抖

定义

throttle（节流）：在连续触发的事件中，在n秒内只执行一次
debounce（防抖）：触发事件后，函数在n秒内只执行一次，如果事件再次触发，则会重新计算函数执行时间

区别

防抖如果一直输入（键盘不抬起），那么回调函数就永远不会执行，等到键盘抬起，那么计时器才会正常工作执行函数
节流是等现在的时间戳减去过去保存的时间戳的值大于设置的延迟时间才会执行回调函数

代码实现

节流

function throttle(func, wait) {
  var context, args;
  var previous = 0;

  return function() {
      var now = +new Date(); //(new Date()).getTime();
      context = this; 
      args = arguments; //用于传入事件参数
      /*
       * 第一遍总是能执行的 
       * 第二遍previous就变成了上一次的now
       * 后面就等now增加，now - previous > wait 那么就执行函数
      */
      if (now - previous > wait) {
          func.apply(context, args);
          previous = now;
      }
  }
}

防抖

function debounce(cb,delay){
  var t = null;
  return function(){
    clearTimeout(t); // 如果函数再次触发，清除计时器重新计时
    var _self = this, // this指向调用者
        args = arguments; // 往执行函数传入实参
    t = setTimeout(function(){
      cb.apply(_self, args);
    },delay);
  }
}