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

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

　html代码：

保存

　javascript代码：

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

2.在规定时间内禁用按钮，按钮无法点击，即实现接口不被多次调用，方法如下：

　html代码：

保存

　javascript代码：

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

3.使用节流函数

　节流：是指一种在指定事件防止函数被频繁调用的思想

　节流函数：是结合时间戳封装的函数，在指定时间内会调用一次方法

　html代码：

保存

　javascript代码：

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

　以上就可以实现了，如果需要多次使用节流函数，也可以封装后再使用：

// 封装节流函数// 参数: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;            }        }    }}

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