节流、防抖

一、节流

1. 英文throttle
2. 用途：一般用在按钮点击时，比如抢票捡漏，五秒内只能点一次（不想用户频繁点击按钮）
3. 抽象理解：技能冷却中（如游戏中，某英雄使用闪现技能后两分钟内，不得再次使用闪现）
4. 代码

const d=()=>{
  console.log('闪现')
}

let 冷却中=false
let timer=null

function sx(){  //闪现技能的冷却中函数
  if(冷却中){return}
  d()
  冷却中=true
  timer=setTimeout(()=>{
    冷却中=false
  },120*1000)
}

• 上述代码是闪现技能的冷却中函数，那疾跑、攻击等技能的冷却，是不是要对应写出冷却中函数，有一百个技能就要写一百次冷却中函数？所以思考，要写出一个函数能实现任何技能的冷却中

const createFn=(f,time)=>{  //非完整代码，只是要理解这个createFn函数想对哪个技能f进行冷却多长时间time
  
  return ()=>{
  
  }
}

• 注意看，冷却中和timer总是同时出现，且为false与null，所以只看其一值即可，timer为null时，冷却中为false；timer不为null时，冷却中为true。最终代码为

const d=()=>{
  console.log('闪现')
}

const throttle=(f,time)=>{  //改标准名字
  let timer=null  //冷却中不要了，只看timer
  return(...args)=>{
    if(timer){return}
    f.call(undefined,...args)
    timer=setTimeout(()=>{
      timer=null
    },time)
  }
}

const d2=throttle(d,120*1000)

二、防抖

1. 英文：debounce
2. 用途：当用户频繁拖动页面时，希望在用户停止拖动后再实现某效果
3. 抽象理解：回城被打断（如游戏中，英雄回城的3秒内若被攻击，需要再次触发回城，若再被攻击就再触发回城，直至3秒内无人攻击即回城成功）
4. 代码

const p=()=>{
  console.log('回城成功')
}

const debounce=(f,time)=>{
  let timer=null
  return(...args)=>{
    if(timer){
      clearTimeout(timer)  //若调用函数时有计时，就清空后再开始计时
    }
    timer=setTimeout(()=>{
      f.call(undefined,...args)
      timer=null
    },time)
  }
}

const p2=debounce(p,3000)