如何优雅的解决按钮“重复点击”问题（vue）

一、背景：

在项目中会有很多按钮点击调取接口的需求（比如：提交操作），很多业务用户会不自觉点两次或多次，就导致按钮click方法会多次触发，导致最后保存了好几条一模一样的数据，就会出现脏数据的情况

二、解决方案：

html部分按钮代码：

<a-button type="primary" @click="saveSubmit" >提交</a-button>
1

1、方案一：按钮添加二次确认功能（利用ant design 的 Modal组件 ）

//提交
    saveSubmit() {
      const this_ = this
      // 提交前的数据处理
      Modal.confirm({
        title: '确认进行提交操作?',
        // content：可以不写
        content: '操作成功将生成新数据',
        // 确认按钮：在这里调接口保存数据
        okText: '确认',
        cancelText: '取消',
        zIndex: 10000,
        onOk() {
          Api.save(data).then((res) => {
            if (!res.success) {
              this.$message.error(res.message)
              return
            }
            Util.closeWindow(this_, 'ok', '1')
          })
        },
        // 点击取消没有特殊操作可以不写onCancel()
        onCancel() {
          console.log('Cancel')
        },
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

但是，如果产品和业务觉得二次确认很繁琐的话，我们就只能使用下面几种方案开解决问题了

方案二：利用 async await

saveSubmit: async () => {
    const res = await Api.save(data)
    if (!res.success) {
        this.$message.error(res.message)
        return
    }
},
1
2
3
4
5
6
7

方案三：按钮上锁

saveSubmit(func, manual = false) {
  let lock = false
  return function (data) {
    if (lock) return
    lock = true
	// 假设使用axios发送请求
    axios.post('urlxxx', postParams).then(
      // 表单提交成功
    ).catch(error => {
      // 表单提交出错
      console.log(error)
    }).finally(() => {
      // 不管成功失败 都解锁
      lock = false
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

由于是button按钮，所以可以使用setAttribute('disabled', xxx)和 removeAttribute('disabled')来代替lock标记，但是要注意我们必须请求接口完成之后先关闭页面或者弹框，再去解除按钮禁用，否则会出现页面还没关闭，按钮已解除禁用，导致用户仍然可以快速点击到。
在项目里可能不只是按钮标签有这样的需求，所以还是推荐用上锁去控制，如果使用的场景比较多的话，这样会有很多重复的lock标记逻辑出现在代码各个地方，所以我们在这里封装一下（提供两种解锁方式：手动解锁 和 自动解锁）：

// func： 将 **点击回调函数func** 作为参数传递给ignoreMultiClick
// manual: 用于手动解锁
function ignoreMultiClick(func, manual = false) {
  let lock = false
  return function (...args) {
    if (lock) return
    lock = true
    // done 函数，用于手动解锁
    let done = () => (lock = false)
    // manual：若该参数为true，则点击事件触发时会给原始的点击回调func传递一个参数done，done是一个函数，调用它可以直接解锁
    if (manual) return func.call(this, ...args, done)
    // 可以使原监听函数func返回一个promise，在该promise决议后自动执行解锁操作。因为Promise管理回调函数非常方便，并且像axios这样非常常用的请求库返回值本身也是一个promise，所以默认情况使用这种方式。
    let promise = func.call(this, ...args)
    // 当然返回promise并不是必须的，有时候我们在发请求前会进行一些验证，验证没通过则直接return，此时装饰器函数也能正常处理，因为使用Promise.resolve包裹了一下promise： Promise.resolve(promise).finally(done)。
    Promise.resolve(promise).finally(done)
    return promise
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

如何使用这个实例呢：
1、自动解锁：

// 利用Promise自动解锁
let saveSubmit = ignoreMultiClick(function (data) {
  if (!checkForm()) return // 假设有一些检测表单的操作，检查不通过则直接返回
  // 返回promise
  return axios.post('urlxxx', data).then(
    // 表单提交成功
  ).catch(error => {
    // 表单提交出错
    console.log(error)
  })
})
1
2
3
4
5
6
7
8
9
10
11

2、手动解锁：

let saveSubmit = ignoreMultiClick(function (data, done) {
  if (!checkForm()) return done() // 表单验证不通过解锁
  axios.post('urlxxx', data).then(
    // 表单提交成功
  ).catch(error => {
    // 表单提交出错
    console.log(error)
  }).finally(() => done()) // 请求结束解锁
}, true)
1
2
3
4
5
6
7
8
9

参考： 普通场景下还是自动解锁比较简单，因为可能有多个条件分支，手动解锁需要在每一个返回的地方都调用done

方案四：防抖（在一定时间内，动作只会执行一次）

saveSubmit() {
  // 维护一个 timer，用来记录当前执行函数状态
  let timer = null;
  // 注意清除定时器
  clearTimeout(timer)
  timer= do(() => {
    Api.save(data).then((res) => {
        if (!res.success) {
            this.$message.error(res.message)
             return
        }
    })
  }, 1000);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

同样由于使用量较大，我们可以封装一下（vue可以封装为自定义指令）：

• 创建debounce.js

export default {
    install(Vue) {
        Vue.directive("debounce", {
            // bind 指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置,比如我们可以设置样式
            bind(el) {
                // console.log(el)
            },
            // 被绑定的元素插入到父节点时
            inserted(el, binding) {
                el.addEventListener('click', function () {
                    let time = binding.value.time;
                    let methods = binding.value.methods;
                    clearTimeout(el.timeId)
                    el.timeId = setTimeout(() => {
                        methods()
                    }, time);
                })
            }
        })
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 在vue文件或者直接在main.js中引入该函数

import debounce from "./debounce"
1

• 按钮点击使用该指令 v-debounce

// html部分
<a-button v-debounce="{ time: 1000, methods: saveSubmit }">提交</a-button>
// javascript部分
saveSubmit(){
    Api.save(data).then((res) => {
        if (!res.success) {
            this.$message.error(res.message)
             return
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11

总结：

大家根据自己项目的实际需求去挑选方案，上面的都不是重点，重点是：欢迎大佬们评论指导！！！