2.14 函数节流和函数防抖

1.函数防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
大招吟唱：防抖

获取页面上class为container的div
给他添加onmousemove鼠标移动事件添加防抖函数，让他在移出后0.3秒执行
//封装的防抖函数    
function debounce(func,wait){
      let timeout;
      // 产生闭包，timeout不会被回收和重复声明会存活下来直到被cleanTimeout
      return function(){
        //获取到了调用执行函数container，存储当前this;
        let _this = this;
        //由于调用的func的事件对象是undefined所以将当前的argument付给他让他也能用事件对象e
        let args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function(){
          //将调用的函数的this指向window
          //apply将this的指向改指为括号里的方法
          func.apply(_this,args)
        },wait);
      }
    }
    let count = 0;
    let container = document.querySelector('.container');
    function dosomeTing(e){
      //可能回调
      console.log(e);
      container.innerHTML = count++;
    } 
    container.onmousemove = debounce(dosomeTing,300);
    //因为oonmousemove需要接收一个函数，所以需要return一个函数

2.函数节流

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
大招冷却：节流
1、通过时间戳，会立即执行一次,但最后一次不触发

   function throttle(func,wait){
      let _this,args;
      let old = 0;
      return function(){
        let now = new Date().valueOf();
        _this = this;
        args = arguments;
        if(now-old > wait){
          //会立即执行第一次
          func.apply(_this,args);
          old = now;
        }
      }
    };
    function dosomeTing(){
      //可能回调
          container.innerHTML = count++;
    };
    let count = 0;
    let container = document.querySelector('.container');
    container.onmousemove = throttle(dosomeTing,2000);

2.通过定时器，开头不执行，结尾执行

   function throttle(func,wait){
      let _this,args,timeout;
      return function(){
        _this = this;
        args = arguments;
        if(!timeout){
          timeout = setTimeout(function(){
            func.apply(_this,args);
            //不能用cleanTimeout因为清除定时器后变量还留着定时器id
            //调用之后必须清空不然timeout就会一直有东西无法进if语句
            timeout = null;
          },wait)
        };
        return;
      }
    };
    function dosomeTing(){
      //可能回调
          container.innerHTML = count++;
    };
    let count = 0;
    let container = document.querySelector('.container');
    container.onmousemove = throttle(dosomeTing,2000);

3.VIP付费骗傻子版版，开头执行，结尾执行

  function throttle(func,wait){
      let args,timeout,_this;
      let old = 0;
      return function(){
        _this = this;
        args = arguments;
        let now = new Date().valueOf();
        if(now-old>wait){
          if(timeout){
            //时间戳加一时，清除定时器让其重新开始
            clearTimeout(timeout);
            timeout = null;
          }
            old = now;
            func.apply(_this,args);
        }else  if(!timeout){
          timeout = setTimeout(function(){
            //定时器加一时，将旧时间戳顶为当前时间重新开始
            old = new Date().valueOf();
            func.apply(_this,args);
            timeout = null;
          },wait);
        }
      }
    }
    let container = document.querySelector('.container');
    let count = 0;
    function mose(){
      container.innerHTML = count++;
    }
    container.onmousemove =  throttle(mose,2000);

3.函数防抖是间隔超过一定时间后才会执行，函数节流是一定时间段内只执行一次。

节流和防抖都是让执行次数减少，减小服务器压力