php重复点击按钮无效,优雅解决按钮”重复点击“问题

一、对思否的一点吐槽

思否上的许多按钮都没有做重复点击检测的问题&＃xff0c;往往导致点击没反应&＃xff0c;多次点击后突然发表多条相同内容&＃xff0c;比如和一位同学的私信&＃xff1a;

又如一个问题下的评论&＃xff1a;

如果你在这篇文章下发表评论&＃xff0c;可以不小心多点几下"提交评论"按钮&＃xff0c;会发现也存在相同的问题——如果你的手速比网速快的话。

这个问题怎么解决呢&＃xff1f;

简单点&＃xff0c;使用一个lock标记&＃xff0c;在请求发出时上锁&＃xff0c;上锁后就不可以再发请求&＃xff0c;可以在请求结束后解锁&＃xff1a;let clickButton &＃61; (function () {

let lock &＃61; false

return function (postParams) {

if (lock) return

lock &＃61; true

// 假设使用axios发送请求

axios.post(&＃39;urlxxx&＃39;, postParams).then(

// 表单提交成功

).catch(error &＃61;> {

// 表单提交出错

console.log(error)

}).finally(() &＃61;> {

// 不管成功失败 都解锁

lock &＃61; false

})

}

})()

button.addEventListener(&＃39;click&＃39;, clickButton)

当然对于button按钮&＃xff0c;可以使用setAttribute(&＃39;disabled&＃39;, xxx)和removeAttribute(&＃39;disabled&＃39;)来代替lock标记。

这个方案问题在于&＃xff0c;对于每一次按钮点击&＃xff0c;我们都要写个lock标记&＃xff0c;相当于重复的逻辑会出现在代码的各个地方——是不是可以封装一下呢&＃xff1f;

二、封装按钮锁定、解锁逻辑

写一个装饰器将逻辑封装起来&＃xff1a;function ignoreMultiClick(func, manual &＃61; false) {

let lock &＃61; false

return function (...args) {

if (lock) return

lock &＃61; true

let done &＃61; () &＃61;> (lock &＃61; false)

if (manual) return func.call(this, ...args, done)

let promise &＃61; func.call(this, ...args)

Promise.resolve(promise).finally(done)

return promise

}

}

将想监听点击回调函数func作为传递给ignoreMultiClick进行装饰&＃xff0c;会返回一个新的函数&＃xff0c;使用该函数作为点击的回调事件即可。

这里同样用了一个标记lock来上锁&＃xff0c;有两种方法解锁&＃xff1a;手动解锁&＃xff1a;可以给ignoreMultiClick传递一个参数manual&＃xff0c;意思是主动调用解锁。若该参数为truthy&＃xff0c;则点击事件触发时会给原始的点击回调func传递一个参数done&＃xff0c;done是一个函数&＃xff0c;调用它可以解锁。

自动解锁&＃xff1a;可以使原监听函数func返回一个promise&＃xff0c;在该promise决议后自动执行解锁操作。因为Promise管理回调函数非常方便&＃xff0c;并且像axios这样非常常用的请求库返回值本身也是一个promise&＃xff0c;所以默认情况使用这种方式。当然返回promise并不是必须的&＃xff0c;有时候我们在发请求前会进行一些验证&＃xff0c;验证没通过则直接return&＃xff0c;此时装饰器函数也能正常处理&＃xff0c;因为使用Promise.resolve包裹了一下promise&＃xff1a; Promise.resolve(promise).finally(done)。

三、使用实例

自动解锁使用例子&＃xff1a;let clickButton &＃61; ignoreMultiClick(function (postParams) {

if (!checkForm()) return // 假设有一些检测表单的操作&＃xff0c;检查不通过则直接返回

// 返回promise

return axios.post(&＃39;urlxxx&＃39;, postParams).then(

// 表单提交成功

).catch(error &＃61;> {

// 表单提交出错

console.log(error)

})

})

button.addEventListener(&＃39;click&＃39;, clickButton)

手动解锁&＃xff1a;let clickButton &＃61; ignoreMultiClick(function (postParams, done) {

if (!checkForm()) return done() // 表单验证不通过解锁

axios.post(&＃39;urlxxx&＃39;, postParams).then(

// 表单提交成功

).catch(error &＃61;> {

// 表单提交出错

console.log(error)

}).finally(() &＃61;> done()) // 请求结束解锁

}, true)

button.addEventListener(&＃39;click&＃39;, clickButton)

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