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

背景：

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

解决：

在全局data函数中定义一个状态变量，如下：

在提交函数中通过变换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('提交失败')
    })
  }
}

此时是2s请求一次接口。