不用防抖节流解决表单连续点击提交

小灰灰 2023-06-25 06:07 12阅读 0赞

背景：

前端的表单提交功能，理论上是点击一次请求一次接口也就提交一次，无奈测试会按住鼠标一直点击。然后也就一直向后端发送数据，前端也会显示多个提交成功的提交。影响体验。测试提出要一段时间内只可以提交一次。直接使用状态判断。

解决：

在全局data函数中定义一个状态变量，如下：  
![在这里插入图片描述][2019122615063950.png]

在提交函数中通过变换`subFlag`变量的状态控制提交测次数。如下：

submitSetting() { 
      if (this.subFlag) { 
        this.subFlag = false // 进入提交函数状态就变为false
        this.addSystemConfig(this.systemConfig).then(
      () => { 
        this.subFlag = false
        this.$message({ 
          showClose: true,
          message: '提交成功',
          type: 'success'
        })
        // 一次提交成功后，2s后subFlag 变为true，此时点击提交按钮才会执行接口请求函数
        setTimeout(() => { 
          this.subFlag = true
        }, 2000)
      }
      ).catch(() => { 
        console.log('提交失败')
        })
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]  
此时是2s请求一次接口。

[2019122615063950.png]: https://img-blog.csdnimg.cn/2019122615063950.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191226151146490.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关不用防抖节流解决表单连续点击提交

背景：前端的表单提交功能，理论上是点击一次请求一次接口也就提交一次，无奈测试会按住鼠标一直点击。然后也就一直向后端发送数据，前端也会显示多个提交成功的提交。影响体验。测试提

小灰灰/ 2023年06月25日 06:07/ 0 赞/ 13 阅读

相关表单防抖，防止表单重复提交

首先新增一个js文件，用来放防抖等工具方法。 // 防抖防止表单重复提交 export const Debounce = (fn, t) => {

绝地灬酷狼/ 2023年02月11日 07:20/ 0 赞/ 31 阅读

相关节流和防抖

事件的触发权很多时候都属于用户，有些情况下会产生问题：向后台发送数据，用户频繁触发，对服务器造成压力一些浏览器事件:window.onresize、windo

忘是亡心i/ 2022年11月29日 11:22/ 0 赞/ 423 阅读

相关 JavaScript 节流和防抖

JavaScript 节流和防抖 JavaScript 节流和防抖节流 1. 简单的节流函数防抖

向右看齐/ 2022年11月17日 14:59/ 0 赞/ 248 阅读

相关节流防抖

/ fn [function] 需要防抖的函数 delay [number] 毫秒，防抖期限值 / function debounce(fn,delay){

今天药忘吃喽~/ 2022年11月04日 12:24/ 0 赞/ 245 阅读

相关防抖、节流-JavaScript

防抖、节流防抖(debounce) JS中的防抖是指触发一个事件后，在一段时间内函数只执行一次，如果在这段时间内事件再次被触发，则重新计算这段时间。例如你进公

Love The Way You Lie/ 2022年09月11日 07:19/ 0 赞/ 253 阅读

相关节流和防抖

节流和防抖 > 作用：均是为节约计算机资源而生，也就是归属于优化方面 > 原理：均使用`setTimeout`来存放待执行的函数，很方便的利用它的延时机制来确定合适的

以你之姓@/ 2022年05月11日 10:42/ 0 赞/ 277 阅读

相关节流和防抖

在前端开发过程中，我们经常会遇到持续性触发的事件，如：点击事件、滚动事件以及拖拽等，但有时我们并不想让该事件如此频繁的执行时该怎么办呢？这时我们就要用到节流和防抖了，它们能大大

刺骨的言语ヽ痛彻心扉/ 2021年11月17日 14:42/ 0 赞/ 379 阅读

相关节流和防抖

节流和防抖其实没那么高大上节流（throttle）和防抖（debounce）是 JS 中的两个概念，听上去挺高大上的，很多同学也望而却步了，加上这俩概念还很类似，所以也

野性酷女/ 2021年09月18日 02:26/ 0 赞/ 458 阅读

相关解决表单提交，点击按钮提交多次的问题

定义一个状态码 // 表单提交performanceList // 修改提交 var saveflag=true;//防止点击多次提交的状态码

灰太狼/ 2021年01月20日 06:27/ 0 赞/ 797 阅读