重庆网站建设公司销售/seo查询官网

应用场景：
对于支付按钮或者收藏等，需进行一定处理，防止短时间内重复点击，多次请求接口，造成不必要资源浪费。

解决方案：

• css样式：对于button按钮，可以使用setAttribute(‘disabled’, xxx)和removeAttribute(‘disabled’)来禁止用和恢复。

• 防抖：立即执行一次，例如按钮防抖，防止用户多次点击（下一次调用必须与前一次调用的时间间隔大于wait才会触发）。

      function debounce(func, wait, immediate) {var timeout;return function (...args) {if (timeout) {clearTimeout(timeout);}if (immediate) {// 如果已经执行过，不再执行var callNow = !timeout;timeout = setTimeout(function () {timeout = null; //下一次调用必须与前一次调用的时间间隔大于wait才会触发}, wait);if (callNow) func.apply(this, args);} else {timeout = setTimeout(() => func.apply(this, args), wait);}};}

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

function ignoreMultiClick(func, manual = false) {let lock = falsereturn function (...args) {if (lock) returnlock = truelet 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进行装饰，会返回一个新的函数，使用该函数作为点击的回调事件即可。

这里同样用了一个标记lock来上锁，有两种方法解锁：

• 手动解锁：可以给ignoreMultiClick传递一个参数manual，意思是主动调用解锁。若该参数为truthy，则点击事件触发时会给原始的点击回调func传递一个参数done，done是一个函数，调用它可以解锁。

• 自动解锁：可以使原监听函数func返回一个promise，在该promise决议后自动执行解锁操作。因为Promise管理回调函数非常方便，并且像axios这样非常常用的请求库返回值本身也是一个promise，所以默认情况使用这种方式。

当然返回promise并不是必须的，有时候我们在发请求前会进行一些验证，验证没通过则直接return，此时装饰器函数也能正常处理，因为使用Promise.resolve包裹了一下promise：Promise.resolve(promise).finally(done)。

使用实例：

function ignoreMultiClick(func, manual = false) {let lock = falsereturn function (...args) {if (lock) returnlock = truelet done = () => (lock = false)if (manual) return func.call(this, ...args, done)let promise = func.call(this, ...args)Promise.resolve(promise).finally(done)return promise}
}//自动解锁使用例子：
let clickButton = ignoreMultiClick(function (postParams) {if (!checkForm()) return // 假设有一些检测表单的操作，检查不通过则直接返回// 返回promisereturn axios.post('urlxxx', postParams).then(// 表单提交成功).catch(error => {// 表单提交出错console.log(error)})
})
button.addEventListener('click', clickButton)//手动解锁：
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)