防抖、节流

防抖和节流相似，都是为了减小服务器的压力。

防抖：比如现在有个输入框，需求用户每次输入能够实时查询相关数据（模糊查询），这时候就需要做个防抖处理，也就是我们尽可能等用户输入完之后再去查询，可以设定个时间，输入完1.5秒或两秒后再去查询（如果在设定的时间又触发事件，会把上次的清除掉，重新计时）。要不然如果用户一直按着不停，一秒钟可能会有很多次请求，会给服务器造成很大的压力，导致页面卡顿

节流：就是对连续发生的事件 做一下限制  不要那么频繁。针对可能每秒钟都会有很多次或几十次事件的发生。可以每两秒触发一次效果就比较好了

<script setup>
import { reactive } from 'vue'
const data = reactive({
  timer: null
})

// 防抖
const antiShake = (fn, wait) => {
  if(data.timer) clearTimeout(data.timer)
  data.timer = setTimeout(fn, wait)
}
// 节流
const throttle = (fn, wait) => {
  if(!data.timer) {
    fn()
    data.timer = setTimeout(() => {
      data.timer = null
    }, wait)
  }
}

</script>