理解函数防抖和函数节流

函数防抖

定义：触发函数调用后，原本为n秒后就执行回调函数，如果在等待的n秒内函数再次被触发，则计时器重新计时

代码实现

function antiShake(fn,time){
    let id = null //闭包隐藏计时器不可被访问及篡改
    return function(){
        if(id){ //如果计时器存在，则清空计时器
            window.clearTimeout(id)
            console.log('你被清掉准备重新计时了')
        }
        id = setTimeout(()=>{ //设置计时器
            fn.apply(this,arguments)
            id = null
        },time)
    }
}
let ations = antiShake(()=>{console.log('test')},3000) //antiShake会返回一个函数
ations() //3秒后会打印test
ations() //若执行时上次的计时器还未到执行时间，则清掉重置计时器，3秒后再打印test

函数节流

定义：触发函数调用后，n秒内不可再触发该函数

代码实现

function throttle (fn, time) {
  let canUse = true //闭包隐藏判断条件不可被访问及篡改
  return function () {
    if (canUse) { //如果判断条件为真，则执行回调函数
      fn.apply(this, arguments)
      canUse = false //设置条件为假
      setTimeout(() => { //设置一个定时器，n秒后判断条件再次变为真
        canUse = true
      }, time)
    } else {
      console.log('技能CD中，稍后再试') //好比游戏中的技能CD，如果处于CD时间，则不会再执行回调函数
    }
  }
}
let ations = throttle(() => {
  console.log('test')
}, 4000)
ations() //执行回调函数，但因test
ations() //4s内再执行打印技能CD中，稍后再试