节流和防抖

什么是节流?

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效 (王者荣耀技能)
防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时(王者荣耀回城)

手写节流和防抖

//⭐节流
//原理：设置节流阀为true，触发事件后关闭节流阀，当定时器执行完毕在打开节流发，这样可以保证每隔一段事件触发一次，减少资源浪费
<button>点我节流</button>
<script>
const btn = document.querySelector('button')
let flag = true
btn.addEventListener('click', function () {
if (flag) {
  flag = false
  timer = setTimeout(() => {
    console.log(1)
    flag = true
  }, 1000)
}
})
</script>

//⭐防抖
//原理：触发事件先清除定时器，在打开定时器，一短时间后执行定时器内容，如果一直触发事件，就一直在清理定时器
<button>点我防抖</button>
<script>
  const btn = document.querySelector('button')
  let timer = null
  btn.addEventListener('click', function () {
    clearTimeout(timer)
    timer = setTimeout(() => {
      console.log(1)
    }, 1000)
  })
</script>

节流和防抖的使用场景

节流：窗口调整、页面滚动、抢购和疯狂点击
防抖：输入框输入内容，登录、发送短信时用户多次点击发送请求，需要防抖