vue 禁止重复点击发送多次请求的实现
短信预约 -IT技能 免费直播动态提醒
某些情况下，为了阻止用户短时间内重复点击某个按钮，导致前端向后端重复发送多次请求。
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官方文档——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 禁止重复点击发送多次请求的实现的文章就介绍到这了,更多相关vue 禁止重复点击内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
