如何限制按钮被多次点击，导致接口被多次调用

前言： 在日常的开发中，经常会忽略掉按钮的重复点击提交，结果就是被细心的测试妹纸狂点按钮测试到不正常，那么我们该怎么来实现按钮的重复提交呢？

思路： 首先我们设置一个开关，当这个按钮被点击的时候，马上关掉开关，一直等程序运行完；后续如果还需要点击，再放开就好了

方法一

1.在data里定义一个初始状态，设为false，作为加载条件

2.请求之前将状态变成true,再去请求接口，这时一直是加载状态

3.当接口响应之后不管是成功还是失败都将状态变成false

4.每次请求之前都判断一下加载状态，如果是true直接return

效果：点击保存按钮，加载初始值为false，不会return代码向下执行；此时加载初始值改为true，在调用接口成功/失败后加载初始值才会改为false；在接口为调用前加载初始值为true再次点击保存按钮都会被return，从而实现多次点击按钮不会重复调用接口。

data() {
  return {
    areasave_trueOrfalse: false
  }
}
mothods: {
  areasave() {
    if (this.areasave_trueOrfalse) {
      return 
    }
    this.areasave_trueOrfalse = true
    ......
    areaSave(params.list)
    .then(res => {
      this.areasave_trueOrfalse = false
    })
    .catch(err => {
      this.areasave_trueOrfalse = false
    })
  }
}

方法二：禁用按钮

要防止按钮快速点击时重复执行，您可以在点击后禁用按钮一段时间，并在一定延迟后重新启用它。

在Vue中，您可以使用data属性来跟踪按钮的禁用状态，并在点击后设置一个延迟来重新启用按钮。

<template>
  <div class="goBackBtn" style="margin-right: 20px;">
    <button class="btnClass" :disabled="isButtonDisabled" @click="goBack()">返回</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isButtonDisabled: false
    };
  },
  methods: {
    goBack() {
      if (this.isButtonDisabled) {
        return;
      }
      
      this.isButtonDisabled = true;
      this.$router.go(-1);

      setTimeout(() => {
        this.isButtonDisabled = false;
      }, 1000); // 设置延迟时间，确保在指定时间后重新启用按钮
    }
  }
};
</script>