Vue3中使用防抖Debounce和节流（Throttle）自定义函数

Vue3中使用防抖Debounce和节流（Throttle）自定义函数

引用

CSDN

1.

https://blog.csdn.net/weixin_40003755/article/details/137594368

本文虽然是半年前的文章，但技术内容仍然具有很高的参考价值。

防抖（Debounce）

防抖是指在一定时间内只执行一次函数，如果在这段时间内再次触发，那么会重新计算执行时间。常用于如输入框实时搜索以及点赞评分等场景，避免短时间内多次触发事件导致性能问题，（请记住防抖是最后一次提交）

例如简单的点击按钮，设置一定时间在执行此函数

<p>
  {{ sum }}
</p>
<van-button type="primary" size="small" @click="handleSum">
  防抖
</van-button>

调用方法一：

<script setup>
import { debounce } from '@/utils/debounce.js'
//方法一
const sum = ref(100)
const handleSum = debounce(() => {
  addSum()
}, 5000，false)
const addSum = () => {
  sum.value++
}
</script>

把以下代码放入debounce.js文件中

// 防抖函数
function debounce(func, wait, immediate) {
  console.log('防抖');
  let timeout; // 定义一个计时器变量，用于延迟执行函数
  return function (...args) { // 返回一个包装后的函数
      const context = this; // 保存函数执行上下文对象
      const later = function () { // 定义延迟执行的函数
          timeout = null; // 清空计时器变量
          if (!immediate) func.apply(context, args); // 若非立即执行，则调用待防抖函数
      };
      const callNow = immediate && !timeout; // 是否立即调用函数的条件
      clearTimeout(timeout); // 清空计时器
      timeout = setTimeout(later, wait); // 创建新的计时器，延迟执行函数
      if (callNow) func.apply(context, args); // 如果满足立即调用条件，则立即执行函数
  };
}
export {
  debounce,
}

一个简单的防抖就完成了

节流（Throttle）

节流是指在一定时间内只允许函数执行一次，无论触发多少次事件，函数都只在规定的时间间隔内执行一次。常用于如滚动事件、提交保存等，确保某些操作不会过于频繁。（请记住是第一时间调用在规定时间不会调用）

<p>
  {{ num }}
</p>
<van-button type="primary" size="small" @click="handleSim">
  节流
</van-button>

调用方法二：

<script setup>
import { throttle } from '@/utils/throttle.js'
//方法二
const num = ref(20)
const addNum = () => {
  num.value++
}
const handleSim = throttle(addNum, 5000)
</script>

把以下代码放入throttle.js文件中

// 节流函数
function throttle(func, wait) {
  let timeout; // 定义一个计时器变量，用于限制函数调用频率
  return function (...args) { // 返回一个包装后的函数
      const context = this; // 保存函数执行上下文对象
      if (!timeout) { // 如果计时器不存在
          func.apply(context, args); // 执行函数
          timeout = setTimeout(() => {
              timeout = null; // 清空计时器变量
          }, wait); // 创建计时器，在指定时间后重置计时器变量
      }
  };
}
export {
  throttle,
}

简单的节流完成了。

防抖和节流调用方法是一样的，只不过写法不一样，个人喜欢那种写那种