函数的防抖（debounce）和节流（throttle）

在‘高频’触发的场景下，需要进行防抖和节流，例如狂点一个按钮，页面的滚动或者输入模糊匹配

例如：

window.onscroll = function(){

console.log('触发滚动事件')

}

默认情况下，页面滚动中：浏览器在最快的反应时间内，就会识别监听一次事件触发，把绑定的方法执行，这样导致方法执行的次数过多，造成不必要的资源浪费.

一 、理解防抖、节流

防抖：在某一次高频触发下，我们只识别一次（可以控制开始触发，还是最后一次触发），假设我们规定500Ms 触发多次算是高频，只要我们检测到是高频触发了，则在本次频繁操作下，也只是触发一次。。。

节流：在某一次高频触发下，我们不只是识别一次，按照我们设定的时间间隔（自己规定的频率），每达到这个频率都会触发一次；假设我们规定的频率是500Ms,我们操作了10min,触发的次数 = （10*60*1000）/500

二、防抖函数

function debounce(func,wait,immediate){

 　　if(typeof func !== 'function'){ return }

　　if(typeof wait === 'undefined'){ wait = 500};

　　if(typeof wait === 'boolean'){

　　　　immediate = wait; wait = 500;

　　　　}

　　if(typeof immediate !== 'boolean'){ immediate = false};

         // 设定定时器返回值标识
        let timer = null;
        return function proxy(...params) {
         let self = this,
         now = immediate && !timer;

         clearTimeout(timer);
       timer = setTimeout(function () {
         timer = null;
        !immediate ? func.call(self, ...params) : null;
          }, wait);

      // 第一次触发就立即执行
          now ? func.call(self, ...params) : null;
      };

   }

三、节流函数 

 function throttle(func,wait){

　　if(typeof func !== 'function') {return }

　　if(typeof wait === 'undefined'){ wait = 500};

　　let timer = null, 

　　previous = 0 ; //记录上一次操作的时间

　　return function proxy(...params){

　　　　let self = this,

　　　　now = new Date()， //当前触发的时间

　　　　remaining = wait - (now - previous);

　　　　if(remaining <= 0){

　　　　　　//两次间隔的时间超过了wait,直接执行即可

　　　　　clearTimeout(timer);

　　　　　timer = null;

　　　　　previous = now;

　　　　　func.call(self,...params)

　　　　} else if (!timer){

　　　　　　timer = setTimeout(function(){

　　　　　　　　　　clearTimeout(timer);

　　　　　　　　　　timer = null ;

　　　　　　　　　　previous = new Date()

　　　　　　　　　　func.call(self,...params)

　　　　　　},remaining);

　　}