禁止手动重复提交表单

Question

用户提交表单时，如何禁止重复点击？
接口请求时间不定，防抖没法用
下面是我目前想的方法，但很不合理，因为必须返回一个promise
又不想额外创建一个变量用来标记，有没有什么好的方法？

function awaitRequest(fn) {
  let isLoading = false
  return async function() {
    if (isLoading) return
    isLoading = true
    fn && (await fn.apply(this, arguments))
    isLoading = false
  }
}

btn.onclick = awaitRequest(function(e) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('request is over')
      resolve()
    }, 5000)
  })
})

Answer 1

我觉得你的方法就很好，通用，我做过类似处理：https://segmentfault.com/a/11...

Answer 2

这个简单啊。
element-ui里面提交按钮有个loading属性,使它的值为变量btnLoading: false。
在用户点击之后，你将btnLoading = true。这时候按钮就不可点击了。loading就一直在那转。
等提交成功了将btnLoading又重置为false。
完美解决！