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进行装饰,会返回一个新的函数,使用该函数作为点击的回调事件即可。 ' f/ C' T$ s) \4 e: p 这里同样用了一个标记lock来上锁,有两种方法解锁:) M/ `, {6 J8 y 手动解锁:可以给ignoreMultiClick传递一个参数manual,意思是主动调用解锁。若该参数为truthy,则点击事件触发时会给原始的点击回调func传递一个参数done,done是一个函数,调用它可以解锁。 - `9 S! H5 E: L8 M) R3 c9 t$ X自动解锁:可以使原监听函数func返回一个promise,在该promise决议后自动执行解锁操作。因为Promise管理回调函数非常方便,并且像axios这样非常常用的请求库返回值本身也是一个promise,所以默认情况使用这种方式。3 D4 g& e- H5 P {6 k
当然返回promise并不是必须的,有时候我们在发请求前会进行一些验证,验证没通过则直接return,此时装饰器函数也能正常处理,因为使用Promise.resolve包裹了一下promise:Promise.resolve(promise).finally(done)。 Y R6 X- P P
三、使用实例. m$ t% {, k Z4 F1 v
自动解锁使用例子: 3 ?! d4 [- q, b