关于vue按钮防抖的问题，防止重复点击请求数据

最新推荐文章于 2025-11-13 17:00:57 发布

原创最新推荐文章于 2025-11-13 17:00:57 发布 · 1.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #封装 #javascript

本文介绍了一种解决因响应时间过长导致的重复请求问题的方法：通过封装防抖函数来限制请求频率。文章详细展示了如何在util.js中配置防抖函数，并在具体页面如保存按钮事件中调用，有效避免了重复数据请求。

相信大家在项目开发过程中会遇到因为请求数据响应时间过慢而多次点击按钮请求多个重复数据的情况
解决办法：封装防抖函数，然后去相应页面引用、调用函数即可

1.util.js（去utils配置防抖函数，wait时间自定义）

/**
 * 函数防抖封装
 * @param {*} fn 回调函数
 * @param {*} wait  时间
 */
export const debounce = (fn, wait = 1000) => {
  let timer;
  return function () {
    let context = this;
    let args = arguments;
    timer && clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, wait);
  };
};

2.对应按钮页面xxx.vue（举例保存按钮事件save()的对应方法,this.xxx表示执行函数，用debounce包裹即可）

<script>
import { debounce } from "@/utils/util.js";          //引用
export default {
  data() {
    return { };
  },
methods: {
	save() {
		debounce(this.XXX());        //调用
		......
	}
}
}
</script>