vue禁止重复点击发送多次请求如何实现

本篇内容介绍了“Vue禁止重复点击发送多次请求如何实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

某些情况下，为了阻止用户短时间内重复点击某个按钮，导致前端向后端重复发送多次请求。

1.通过控制 loading 来设置 loading，或者 disabled

刚开始直接给按钮加上loading效果，即在请求前 loading为true, 在请求结束finally里loading置为false,以达到阻止重复点击的问题，但部分请求短时间内，用户依然可以双击触发多次请求。

2.使用Vue自定义指令

// 全局注册自定义指令Vue.directive("resetClick", {  inserted(el, binding) {    el.addEventListener("click", () => {      if (!el.disabled) {        el.disabled = true;        el.style.cursor = "not-allowed";        setTimeout(() => {          el.disabled = false;          el.style.cursor = "pointer";        }, binding.value || 1000);      }    });  },}); // 组件内使用<el-button type="primary" v-resetClick="1000" @click="confirm">    确 定</el-button>

3. 使用debounce函数

在工具类util.js文件中定义 防抖函数 (或直接使用第三方库 throttle-debounce等)

// 防抖debounce代码：function debounce(fn, delay) {  let timeout = null // 创建一个标记用来存放定时器的返回值  return function (e) {    // 每当用户输入的时候把前一个 setTimeout clear 掉    clearTimeout(timeout)    // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数    timeout = setTimeout(() => {      fn.apply(this, arguments)      timeout = null    }, delay)  }}

vue组件中使用

<template>  <div>    <el-button type="primary" @click="handleClick">快速连续点击</el-button>  </div></template> <script>import { debounce } from '@/util/util.js' export default {  data() {    return {}  },  methods: {    handleClick: debounce(() => {      console.log('删除操作等业务逻辑')    }, 500),  },}</script> <style></style>

以上两种方式都存在问题

这两种方式已经基本上能满足防重复点击的需求，但实际测试时发现延时的时间不好控，如果延时时间短（<150ms）快速点击还是会有几率多次触发事件。如果延时时间长(>600ms)，用户点击后会有个明显的延时过程才能触发事件，用户体验就不太好。

首先明确下我们想要实现的效果。

• 用户在按下按钮的时候立即触发点击事件。

• 用户在快速连续按下按钮的时候只触发第一次的点击事件。

• 用户不间断疯狂点击按钮（暴力测试），也只是立即触发第一次的事件，在疯狂点击的过程中不会触发事件，即使超时时间已经过去。

4.最终解决方案lodash

lodash官方文档&mdash;&mdash;debounce

npm i lodash -S

组件中使用

<template>  <div>    <el-button type="primary" @click="handleClick">快速连续点击</el-button>  </div></template> <script>import { debounce } from 'lodash' export default {  data() {    return {}  },  methods: {    handleClick: debounce(      () => {        console.log('删除操作等业务逻辑')      },      500,      {        leading: true, // 在延迟开始前立即调用事件        trailing: false, // 在延时结束后不调用,保证事件只被触发一次      },    ),  },}</script>

“vue禁止重复点击发送多次请求如何实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！