点击多次提交按钮重复提交

点击提交按钮,连续点击多次,它重复提交了,这个问题怎么处理呢
(需求是无论点击多少次是提交一次就可以了)

这是一个接口幂等问题,推荐你参考一下下面这篇文章

前端代码连续点击多次按钮,导致数据提交多次,导致后端幂等,解决方案(全局 每次前端请求设置Loading加载效果,请求完成后,关闭Loading加载)_韩旭的博客-CSDN博客 文章目录1、文章开篇:什么是幂等?1、文章开篇:什么是幂等?幂等(idempotent、idempotence)是一个数学与计算机学概念,常见于抽象代数中。在编程中一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同。幂等函数,或幂等方法,是指可以使用相同参数重复执行,并能获得相同结果的函数。这些函数不会影响系统状态,也不用担心重复执行会对系统造成改变。例如,“setTrue()”函数就是一个幂等函数,无论多次执行,其结果都是一样的.更复杂的操作幂等保证是利用唯一交易号(流水号)实现。 https://blog.csdn.net/clli_Chain/article/details/111837875?spm=1001.2014.3001.5501

点击提交后把按钮置为不可点击状态

节流防抖即可,设置一个变量控制按钮的置灰或者是loding状态,点击事件中去设置他为true,接口相应后设置为false

点击请求的时候,把按钮设置为disabled,请求完再去掉disabled

你可以 提交 后 ,按钮 禁用,提交完成 再 改成 不禁用。 或者 函数 节流、防抖。

函数节流防抖
需要在点击后将按钮禁用,直到正确提交拿到返回后,或者提交拿到异常后根据业务再判断是让他可用还是禁用

写一个节流函数,防止重复提交


```javascript
// 节流函数
function throttle(fn delay){
  let cando = true;
 
  return function(){
    if(!cando){
      return;
    }
    cando = false;
    setTimeout(() => {
      cando = true;
      fn.apply(this, arguments);  
    })
  }
}


```