vue 禁止重复点击 发送多次请求

之前项目有个需求就是禁止多次点击发送请求，需求本地缓存来实现吗还是

存储一个临时变量来实现的，第一次点击就把这个变量改为true，第二次就判断这个临时变量，就不会再触发了

关注我，带你了解更多前端知识！

节流函数


let flag,timer;
function throttle(func, wait = 500) {
        if (!flag) {
            flag = true
            timer = setTimeout(() => {
                flag = false
                typeof func === 'function' && func();
            }, wait);
        }
};

【以下回答由 GPT 生成】

如何在Vue.js中实现禁止重复点击按钮发送多次请求？

为了实现在Vue.js中禁止重复点击按钮发送多次请求的功能，可以通过以下几个步骤来实现：

1. 使用本地变量或Vue组件的data属性来保存按钮禁用状态

在Vue组件的data属性中，添加一个布尔类型的属性，用于保存按钮是否被禁用的状态。可以命名为isButtonDisabled。初始值设为false，表示按钮初始状态为可点击。

data() {
  return {
    isButtonDisabled: false
  }
}

2. 在按钮的点击事件处理函数中添加禁用按钮的逻辑

在按钮的点击事件处理函数中，需要添加逻辑来禁用按钮，防止多次点击。

methods: {
  handleClick() {
    if (!this.isButtonDisabled) {
      this.isButtonDisabled = true;

      // TODO: 发送请求或执行其他操作

      // 设置一个合适的时间后，重新启用按钮
      setTimeout(() => {
        this.isButtonDisabled = false;
      }, 1000); // 例如，在1秒后重新启用按钮
    }
  }
}

在点击事件处理函数中，通过判断this.isButtonDisabled的值，来决定是否禁用按钮。如果按钮未被禁用，则执行相应的请求发送等操作，并将this.isButtonDisabled设置为true，表示禁用按钮。

3. 将按钮的禁用状态绑定到HTML中的按钮元素上

在HTML中的按钮元素上，使用Vue.js的指令v-bind来绑定按钮的禁用状态。

<button v-bind:disabled="isButtonDisabled" @click="handleClick">点击按钮</button>

其中，v-bind:disabled="isButtonDisabled"表示将按钮的disabled属性与isButtonDisabled变量绑定，从而实现按钮禁用状态的同步更新。

到此，我们已经通过以上步骤在Vue.js中实现了禁止重复点击按钮发送多次请求的功能。

最终代码如下：

<template>
  <button v-bind:disabled="isButtonDisabled" @click="handleClick">点击按钮</button>
</template>

<script>
export default {
  data() {
    return {
      isButtonDisabled: false
    }
  },
  methods: {
    handleClick() {
      if (!this.isButtonDisabled) {
        this.isButtonDisabled = true;

        // TODO: 发送请求或执行其他操作

        setTimeout(() => {
          this.isButtonDisabled = false;
        }, 1000); // 例如，在1秒后重新启用按钮
      }
    }
  }
}
</script>


【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

点击的时候加一个loading

直接节流函数搞起

如果你是在一个固定时间比如1秒内不能点击多次，你可以设置一个延时器，设置一个布尔值来判断是否执行点击事件，第一次点击之后布尔值改为false，在定时器中设置延迟1s并吧布尔值改为true