- A+
所属分类：Web前端
1.按钮点击后添加loading，接口返回成功后再移除loading（经过多次尝试发现，此方法不能完全确保只调用一次接口，第二次添加时仍会多次调用接口），方法如下：
html代码：
<el-button @click="onSave" :loading="onLoading">保存</el-button>
javascript代码：
<script> export default { data() { return { onLoading: false, }; }, methods: { onSave() { this.onLoading = true; let parmas = { //这里是接口传入参数 }; insert(parmas) .then((res) => { if (res.code === 200) {this.$message.success(res.message); this.onLoading = false; } else { this.$message.error(res.message); this.onLoading = false; } }) .catch((error) => { console.log(error); }); }, }, }; </script>
2.在规定时间内禁用按钮，按钮无法点击，即实现接口不被多次调用，方法如下：
html代码：
<el-button @click="onSave" :disabled="isdisabled">保存</el-button>
javascript代码：
<script> export default { data() { return { isdisabled: false, }; }, methods: { onSave() { this.isdisabled = true; //这里使用定时器解除按钮禁用 setTimeout(() => { this.isdisabled = false; }, 1500); let parmas = { //这里是接口传入参数 }; insert(parmas) .then((res) => { if (res.code === 200) {this.$message.success(res.message); } else { this.$message.error(res.message); } }) .catch((error) => { console.log(error); }); }, }, }; </script>
3.使用节流函数
节流：是指一种在指定事件防止函数被频繁调用的思想
节流函数：是结合时间戳封装的函数，在指定时间内会调用一次方法
html代码：
<el-button @click="getTrottle">保存</el-button>
javascript代码：
<script> const throttle = (func, wait = 50) => { //上一次执行该函数的时间 let lastTime = 0; return function (...args) { // 当前时间 let now = +new Date(); // 将当前时间和上一次执行函数时间对比 // 如果差值大于设置的等待时间就执行函数 if (now - lastTime > wait) { lastTime = now; func.apply(this, args); } }; }; export default { data() { return { getTrottle: undefined, }; }, created() { this.getTrottle = throttle(this.onSave, 3000); }, methods: { onSave() { let parmas = { //这里是接口传入参数 }; insert(parmas) .then((res) => { if (res.code === 200) { this.$message.success(res.message); } else { this.$message.error(res.message); } }) .catch((error) => { console.log(error); }); }, }, }; </script>
以上就可以实现了，如果需要多次使用节流函数，也可以封装后再使用：
// 封装节流函数 // 参数:1.回调函数，2.时间，3.布尔值 // 时间戳: 毫秒值 // 相差的毫秒值 = 结束的时间戳 - 开始的时间戳 function trottle(callback,times,bool) { // 记录开始的时间戳 var startTime = new Date().getTime(); // 记录布尔值 var fistFlag = bool; // 返回function函数 (事件函数) return function() { // 记录结束的时间戳 var endTime = new Date().getTime(); // 相差的毫秒值 var totalTime = endTime - startTime; // 记录事件对象 var args = arguments[0]; // 判断布尔值是否为true if(fistFlag){ if(typeof callback == "function"){ // 调用回调函数 callback(args); // 设置布尔值为false fistFlag = false; // 重置开始的时间戳 startTime = endTime; } } // 判断是否达到指定的时间 if(totalTime >= times){ // 符合条件执行回调函数 if(typeof callback == "function"){ // 调用回调函数 callback(args); // 重置开始的时间戳 startTime = endTime; } } } }
以上就是对于用户短时间内多次点击按钮触发点击事件的解决方法，哪位小伙伴有其他更简单的方法欢迎评论留言交流哦~
