防抖、节流

2022-02-08 11:05:54 阅读：166 来源： 互联网

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

防抖：比如现在有个输入框，需求用户每次输入能够实时查询相关数据（模糊查询），这时候就需要做个防抖处理，也就是我们尽可能等用户输入完之后再去查询，可以设定个时间，输入完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>

标签：防抖,节流,timer,data,fn,wait
来源： https://blog.csdn.net/m0_51431448/article/details/122819711

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

防抖、节流