节流和防抖

js是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。
而频繁的操作会影响性能，所以有了节流和防抖

防抖

案例
在input搜索内容 haha
那么每输入一个字母就向发送一次请求，一共会发送4次请求

防抖可以解决上述问题
监听某个时间段，没有再次触发，才发送请求(需要setTimeout解决)

function debounce(fn, delay) {
  var timer = null;
  return function() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(function() {
      fn();
    }, delay);
  }
}
//优化一下
function debounce(fn, delay) {
  var timer = null;
  return function() {
    if (timer) clearTimeout(timer);
    // 获取this和argument
    var _this = this;
    var _arguments = arguments;
    timer = setTimeout(function() {
      // 在执行时，通过apply来使用_this和_arguments
      fn.apply(_this, _arguments);
    }, delay);
  }
}

节流

某个时间内，只触发一次事件

1 监听页面的滚动事件；
2 鼠标移动事件；
3 用户频繁点击按钮操作；
4 游戏中的一些设计；

//第一次会触发
function throttle(fn, interval) {
  var last = 0;

  return function() {
    // this和argument
    var _this = this;
    var _arguments = arguments;

    var now = new Date().getTime();
    
    if (now - last > interval) {
      fn.apply(_this, _arguments);
      last = now;
    }
  }
}

可以直接使用第三方
lodashhttps://www.lodashjs.com/

_.debounce(func, [wait=0], [options={}])
_.throttle(func, [wait=0], [options={}])

underscorehttp://underscorejs.org/

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

var throttled = _.throttle(updatePosition, 100);
$(window).scroll(throttled);