函数节流与防抖的实现

节流：

高频事件不断触发，每隔一定时间会执行一次，会稀释高频事件；

实现原理：在闭包内设置一个标记，初始值为true，若标记为false，则退出函数，不执行，若标记值为true，马上将标记变成false；并且执行一个定时器，在定时器内执行回调函数，并且将标记设置为true；

具体代码：

   function throttle(fn,time){
      var canrun = true;//通过闭包保存一个标记
      return function(){//返回一个函数
        if(!canrun) return;//如果不在执行时间内 则不执行
        canrun = false;//如果在执行时间内 马上将标记改为false 然后执行后续代码
        setTimeout(() => {
          // 执行时间结束时 执行函数 并且将标记设置为可执行
          fn.apply(this,arguments);
          canrun = true;
        },time);
      };
    }

测试代码：

    let dom = document.getElementsByClassName("content")[0];
    var log2 = throttle(log,2000);//把log函数变成一个节流函数
    dom.addEventListener("click",function(){
      log2(222);
    })
    function log(num){
      console.log(num);
    }

防抖：

高频事件触发时，在一定时间内函数只会触发一次，如果不停触发，那么久只执行一次，不会隔一段时间执行一次，除非中间停止足够的时间，才会触发第二次；

实现原理：在闭包内定义一个变量，次变量用来存放定时器，执行函数时会先清除上一个定时器，然后重新设置一个定时器，定时器内执行回调函数，如果一直触发，就会不断的清除计时器，函数就不会执行；

具体代码：

   function debounce(fn,time){
      let timeout = null;
      return function(){
        clearTimeout(timeout); //清除定时器 定时器清除后，内部的函数就不会执行
        timeout = setTimeout(() => {//重新设置定时器
          fn.apply(this,arguments);//执行函数
        }, time);
      }
    }

测试代码：

    let dom = document.getElementsByClassName("content")[0];
    var log2 = debounce(log,2000);//把log函数变成防抖函数
    dom.addEventListener("click",function(){
      log2(222);
    })
    function log(num){
      console.log(num);
    }

总结一下，节流函数和防抖函数在高频事件不断触发时会有明显区别；节流函数会稀释高频事件，而防抖会阻断，事件不停，函数就不会执行