20180730-20180803 节流和防抖

 先上代码

//防抖
// 将会包装事件的 debounce 函数
function debounce(fn, delay) {
  // 维护一个 timer
  let timer = null;

  return function() {
    // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
    let context = this;
    let args = arguments;

    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}
//节流
var throttle = function(func,delay){
    var prev = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if(now-prev>=delay){
            func.apply(context,args);
            prev = Date.now();
        }
    }
}
// 当用户滚动时被调用的函数
function foo() {
  console.log('You are scrolling!');

}
window.addEventListener('scroll', debounce(foo, 2000));
window.addEventListener('scroll', throttle(foo, 2000));

节流和防抖其实都是为了性能而使用的 

假如领导让你写一个搜索界面，在搜索框里肯定不能每多一个字符就要向后台搜索一遍吧？这样不仅影响性能，用户体验也不会多好。

防抖就这样出现了， 简单来看就是加了个定时器，在停止了一段时间之后执行需要的方法。

节流有点类似，简单来看是隔一段时间执行需要的方法。

（感觉太简单了实在没什么好说的。。。知道原理就好，两个词有点容易混淆）