前端vue中防止用户短时间内多次点击按钮触发点击事件解决方法

  • 前端vue中防止用户短时间内多次点击按钮触发点击事件解决方法已关闭评论
  • 13 次浏览
  • A+
所属分类:Web前端
摘要

1.按钮点击后添加loading,接口返回成功后再移除loading(经过多次尝试发现,此方法不能完全确保只调用一次接口,第二次添加时仍会多次调用接口),方法如下:

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;             }         }     } }

  以上就是对于用户短时间内多次点击按钮触发点击事件的解决方法,哪位小伙伴有其他更简单的方法欢迎评论留言交流哦~