細(xì)節(jié)見內(nèi)功 - 如何優(yōu)雅解決按鈕”重復(fù)點擊“問題

一、這個問題怎么解決呢？

簡單點，使用一個lock標(biāo)記，在請求發(fā)出時上鎖，上鎖后就不可以再發(fā)請求，可以在請求結(jié)束后解鎖：

let clickButton = (function () {  let lock = false  return function (postParams) {    if (lock) return    lock = true    // 假設(shè)使用axios發(fā)送請求    axios.post('urlxxx', postParams).then(      // 表單提交成功    ).catch(error => {      // 表單提交出錯      console.log(error)    }).finally(() => {      // 不管成功失敗 都解鎖      lock = false    })  }})()
button.addEventListener('click', clickButton)

當(dāng)然對于button按鈕，可以使用setAttribute('disabled', xxx)和removeAttribute('disabled')來代替lock標(biāo)記。

這個方案問題在于，對于每一次按鈕點擊，我們都要寫個lock標(biāo)記，相當(dāng)于重復(fù)的邏輯會出現(xiàn)在代碼的各個地方——是不是可以封裝一下呢？

二、封裝按鈕鎖定、解鎖邏輯

寫一個裝飾器將邏輯封裝起來：

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  }}

將想監(jiān)聽點擊回調(diào)函數(shù)func作為傳遞給ignoreMultiClick進(jìn)行裝飾，會返回一個新的函數(shù)，使用該函數(shù)作為點擊的回調(diào)事件即可。
這里同樣用了一個標(biāo)記lock來上鎖，有兩種方法解鎖：

手動解鎖：可以給ignoreMultiClick傳遞一個參數(shù)manual，意思是主動調(diào)用解鎖。若該參數(shù)為truthy，則點擊事件觸發(fā)時會給原始的點擊回調(diào)func傳遞一個參數(shù)done，done是一個函數(shù)，調(diào)用它可以解鎖。

自動解鎖：可以使原監(jiān)聽函數(shù)func返回一個promise，在該promise決議后自動執(zhí)行解鎖操作。因為Promise管理回調(diào)函數(shù)非常方便，并且像axios這樣非常常用的請求庫返回值本身也是一個promise，所以默認(rèn)情況使用這種方式。

當(dāng)然返回promise并不是必須的，有時候我們在發(fā)請求前會進(jìn)行一些驗證，驗證沒通過則直接return，此時裝飾器函數(shù)也能正常處理，因為使用Promise.resolve包裹了一下promise：Promise.resolve(promise).finally(done)。

三、使用實例

自動解鎖使用例子：

let clickButton = ignoreMultiClick(function (postParams) {  if (!checkForm()) return // 假設(shè)有一些檢測表單的操作，檢查不通過則直接返回  // 返回promise  return 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()) // 請求結(jié)束解鎖})button.addEventListener('click', clickButton)

普通場景下還是自動解鎖比較簡單，因為可能有多個條件分支，手動解鎖需要在每一個返回的地方都調(diào)用done。

本文完~

點個『在看』支持下?