闭包-防抖和节流

节流

• 假如一个用户一直触发某个函数，并且每次触发时间小于5s，但是我们就每隔5s调用一次函数就是节流
• 例如： 按电梯 验证码
• 作用 ：缓解服务器压力

//5s内不管点击多少次 真正的代码都只执行1次
let btn = document.querySelector('button')
//最开始的时间，页面同步代码执行完毕的时间
let preTime = new Date()
btn.addEventListener('click',function(){
    //事件处理函数只要被点击一定会执行
    let nowTime = new Date()
    if(nowTime - preTime > 5000){
       console.log('真正要执行的代码')
       preTime = nowTime
  }
})

//用闭包优化一个节流方法
let btn = document.querySelector("bontton")
let fn = function(){
   let preTime = new Date()
   return function b(){
       let nowTime = new Date()
       if( nowTime - preTime > 5000){
           console.log('真正要执行的代码')
           preTime = nowTime
    }
  }
}
let clickHandler = fn()
btn.addEventLister("click",clickHandler)

//继续优化
//匿名函数 (function(){})() 执行后的返回函数，作为click的事件处理函数
let btn = document.querySelector('button')
btn.addEventListener('click',(()=>{
   let preTime = new Date()
   return ()=>{
      let nowTime = new Date()
      if(nowTime - preTime > 5000){
           console.log('真正要执行的代码')
           preTime = nowTime
    }
  } 
})())

防抖

• 在一段时间内触发一次事件函数，如果单位时间还没有到达，再次触发那个事件函数，那么就立刻停止上一次的事件直接重新计算间隔时间
• 如果我做了个5秒的防抖，我3秒内点100次，从我最后一次点击开始，往后5秒后开始执行，也就是我点的越久拖的越久

let inp = document.querySelector('input')
inp.oninput = (function(timer){//没有传参，第一次时timer为undefined不会报错 第二次timer为定时器
    return function(){
      clearTimeout(timer)
      timer = setTimeout(()=>{
         console.log(inp.value)
    },1000)
  }
})()

节流

• 在一段时间内触发一次事件函数，如果前一次触发的事件函数还没有执行，则再次触发的事件不做任何操作，在单位时间内触发多次，只会执行第一次触发的操作 

        let inp = document.querySelector('input')
        inp.oninput = (function (flag) {
            return function () {
                if (!flag) return  // 后续操作不再执行
                flag = false  //在3s的定时器未开启之前它一直是false，只要是false就一直return
                setTimeout(() => {   
                    console.log(inp.value)
                    flag = true
                }, 3000)
            }
        })(true)