其他---23防抖

防抖和节流：

共同点：限制函数的执行次数；

不同点：

　　防抖：通过setTimeout的方式，在一定时间间隔内，将多次触发变成一次触发；

　　节流：减少一段时间的触发频率；

一、防抖（版本一）

场景：多次输入内容时，2s后才会触发函数打印事件对象;(注意：如果一直输入，不会触发函数打印事件对象，当停止输入2s后，才会打印事件对象)

html:
<button id="button" onclick="menu()" >重新发送</button>

js：
let time;
function menu(e){
     // 当time中有旧的setTimeout,就清空，最后就只会执行最新的setTimeout
     if(time){
            clearTimeout(time);
     }
     time=setTimeout(()=>{
            console.log(e.target)
      },2000)
}
let inputs=document.querySelector('input')
inputs.addEventListener('input',menu)

二、防抖（版本二）

html:
<button id="button" onclick="menu()" >重新发送</button>

js:
let inputs=document.querySelector('input')
inputs.addEventListener('input',menu(set))
function set(e){//e第三步
       console.log(e)//e第四步
}
function menu(fn){
      let time;
      return function(e){//e第一步
            clearTimeout(time)
            time=setTimeout(()=>{
                 fn(e)//e第二步
            },1000)
      }
}

三、节流

场景：在2s时间内不管触发多少次，都不会执行函数打印事件对象；（注意：一直输入内容时，每隔2s会打印一次事件对象）

<button id="button" onclick="menu()" >重新发送</button>

js:
let inputs=document.querySelector('input')
inputs.addEventListener('input',menu(set,2000))
function set(e){
      console.log(e)
}
function menu(fn,delay){
       let time=0;
       return function (e){
            var cur=new Date().getTime();
            // 如果当前时间减去上次时间大于2000就执行，否则不执行
            if(cur-time>delay){
                fn(e);
                time=cur;
            }
       }
}