目錄

• 場景
• 1.初步解決方案：特事特辦
• 2. 基于約定回調(diào)的條件式回調(diào)函數(shù)
• 3. 基于 Promise 的條件式回調(diào)函數(shù)
• 4. React hook 版

場景

相信很多人都遇到過類似的場景：

某一個按鈕是用來發(fā)送請求的，并且需要一段時間來處理。但是用戶往往會在處理期間有意或無意地點(diǎn)擊多次，因此我們希望在上一次發(fā)出的請求處理完畢之前，不再發(fā)出新的請求。

1.初步解決方案：特事特辦

“特事特辦”的意思，就是每次遇到這樣的場景，都特意寫一段邏輯來處理：

document.addEventListener("click", (() => {
    let lock = false;
    return () => {
if(lock) return;
lock = true;
console.log("clicked");
// 為了方便測試就使用延時了
setTimeout(() => {
    lock = false;
}, Math.random() * 4e3)
    }
})());

2. 基于約定回調(diào)的條件式回調(diào)函數(shù)

上面的寫法其實(shí)也不費(fèi)事，但是這種條件限制能不能像已經(jīng)被面試問爛了的“節(jié)流”和“防抖”那樣，用一個函數(shù)把它包裹起來就可以達(dá)成效果呢？
問題的關(guān)鍵其實(shí)在于：防抖和節(jié)流需要考慮的執(zhí)行條件是時間，這個條件對于所有函數(shù)而言都是一個“共同的語言”，因此才雙方可以做到那樣的“默契”。
而要在這種場景里實(shí)現(xiàn)同樣的效果，雙方需要刻意的約定：例如被條件執(zhí)行的函數(shù)額外接受一個函數(shù)，用于在合適的時機(jī)解除條件限制。

function conditioned(callback:(release:Function,...args:any[]) => any){
    let lock = false;
      return function(...args:any[]){
if(lock) return;
lock = true;
callback.call(this, () => {
      lock = false;
}, ...args);
      }
}