QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 2758|回复: 0

[HTML/CSS/JS] 如何优雅的解决按钮“重复点击”问题

[复制链接]

等级头衔

积分成就    金币 : 2861
   泡泡 : 1516
   精华 : 6
   在线时间 : 1321 小时
   最后登录 : 2025-7-9

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2021-1-1 10:01:35 | 显示全部楼层 |阅读模式
一、问题怎么解决
- T& i$ k8 [% r7 _       简单点,使用一个lock标记,在请求发出时上锁,上锁后就不可以再发请求,可以在请求结束后解锁:9 N: T8 v- ]( |" N+ b0 ~# B9 t, i
let clickButton = (function () {
  let lock = false
  return function (postParams) {
    if (lock) return
    lock = true
    // 假设使用axios发送请求
    axios.post('urlxxx', postParams).then(
      // 表单提交成功
    ).catch(error => {
      // 表单提交出错
      console.log(error)
    }).finally(() => {
      // 不管成功失败 都解锁
      lock = false
    })
  }
})()

button.addEventListener('click', clickButton)
      当然对于button按钮,可以使用setAttribute('disabled', xxx)和removeAttribute('disabled')来代替lock标记。这个方案问题在于,对于每一次按钮点击,我们都要写个lock标记,相当于重复的逻辑会出现在代码的各个地方——是不是可以封装一下呢?
' n5 i' J! `" ?2 ]) @二、封装按钮锁定、解锁逻辑
5 D' }7 q* ~/ T0 ~% H       写一个装饰器将逻辑封装起来:
, B  C  K1 t. H8 q4 O2 O8 L' `& ?' K6 m
function ignoreMultiClick(func, manual = false) {
  let lock = false
  return function (...args) {
    if (lock) return
    lock = true
    let done = () => (lock = false)
    if (manual) return func.call(this, ...args, done)
    let promise = func.call(this, ...args)
    Promise.resolve(promise).finally(done)
    return promise
  }
}
      将想监听点击回调函数func作为传递给ignoreMultiClick进行装饰,会返回一个新的函数,使用该函数作为点击的回调事件即可。, L$ j8 m$ u: `6 Z. p8 }4 f
       这里同样用了一个标记lock来上锁,有两种方法解锁:
0 ]+ C2 }6 r$ M. x手动解锁:可以给ignoreMultiClick传递一个参数manual,意思是主动调用解锁。若该参数为truthy,则点击事件触发时会给原始的点击回调func传递一个参数done,done是一个函数,调用它可以解锁。7 ~1 @" d% ?/ r7 R1 i
自动解锁:可以使原监听函数func返回一个promise,在该promise决议后自动执行解锁操作。因为Promise管理回调函数非常方便,并且像axios这样非常常用的请求库返回值本身也是一个promise,所以默认情况使用这种方式。
& O5 d, G: l. U) R3 C6 f) X0 x       当然返回promise并不是必须的,有时候我们在发请求前会进行一些验证,验证没通过则直接return,此时装饰器函数也能正常处理,因为使用Promise.resolve包裹了一下promise:Promise.resolve(promise).finally(done)。1 u' g3 t% P2 n
三、使用实例
6 O0 Z* k7 j" B) X8 _' [+ b$ {+ W/ g       自动解锁使用例子:
; b8 \1 D, f( k  _4 E* E/ Q
let clickButton = ignoreMultiClick(function (postParams) {
  if (!checkForm()) return // 假设有一些检测表单的操作,检查不通过则直接返回
  // 返回promise
  return axios.post('urlxxx', postParams).then(
    // 表单提交成功
  ).catch(error => {
    // 表单提交出错
    console.log(error)
  })
})
button.addEventListener('click', clickButton)
      手动解锁使用例子:3 @. x/ W: ~7 I' `" s$ P, }) m
let clickButton = ignoreMultiClick(function (postParams, done) {
  if (!checkForm()) return done() // 表单验证不通过解锁
  axios.post('urlxxx', postParams).then(
    // 表单提交成功
  ).catch(error => {
    // 表单提交出错
    console.log(error)
  }).finally(() => done()) // 请求结束解锁
})
button.addEventListener('click', clickButton)
      普通场景下还是自动解锁比较简单,因为可能有多个条件分支,手动解锁需要在每一个返回的地方都调用done。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2025-9-13 17:18

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表