实现简单防抖与节流

简介

防抖与节流本质是优化高频率执行代码的一种手段,当用户不断的触发某一个事件,会不断的调用绑定在事件上的回调函数,极大的浪费资源,降低前端性能，为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以使用防抖和节流的方式来减少调用频率。

防抖

防抖是当持续触发一个事件时只执行最后一次。

应用场景:
频繁触发按钮点击事件, input框搜索等,如果用户每输入一次就向后台请求一次会增大后台的压力,这时可以使用防抖来解决。

let obj = reactive({count:1}) //渲染到视图层
let num   //定义变量
let btn = () => {
  clearTimeout(num)  //清除上一次的定时器, 当这个事件执行第二次时会清空第一次执行事件时的定时器 以此类推,
  直到在1秒内不点击这个事件了,才会执行下面的定时器事件
   num = setTimeout(() => {  //定时器 
      obj.count++
    },1000)
  }

节流

节流是持续触发一个事件时，在规定时间内只会执行第一次。

应用场景：
下拉加载更多 ( 窗口滚动事件 ) , 浏览器的resize , scroll 事件, 鼠标持续触发事件。

let throttling =null //定义节流,当他为空时倒计时是不存在的
let btn2 = () => { //节流
  if (!throttling) { //判断取反为真当为null时是true,否则为false
  sum.value++
  throttling = setTimeout(() => {  //将定时器里的内容赋值给变量
    throttling=null  //使用定时器,1秒后重新赋值为空,这样当1秒后判断为true否则为false不执行里面的代码
    },1000)
   }
 }

全部代码

我是使用的vue3来写的防抖与节流

<template>
  <h1>{{obj.count}}</h1>
  <button @click="btn">防抖</button>
  <h1>{{obj.sum}}</h1>
  <button ref="setDom" @click="btn2">节流</button>
</template>

<script setup>
import { reactive,toRef} from "vue"

let obj = reactive({
  count: 1,
  sum:1
})

let count =toRef(obj,'count')  
let sum =toRef(obj,'sum')  
let ois  //定义防抖变量
let throttling =null //定义节流,当他为空时倒计时是不存在的

let btn = () => {  //防抖
  clearTimeout(ois) //清空上一次的定时器
  ois = setTimeout(() => {
    console.log(ois);
      count.value++
    },1000)
}

let btn2 = () => { //节流在1秒内只会执行第一次
  if (!throttling) { //判断取反为真当为null时是true,否则为false
  sum.value++
    throttling = setTimeout(() => {
    console.log(throttling);
    throttling=null  //使用定时器,1秒后重新赋值为空,这样当1秒后判断为true否则为false不执行里面的代码
    },1000)
  }
}
</script>