JS實現"上次操作未完成禁止新操作"邏輯特事特辦方案

目錄

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

場景

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

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

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

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

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

2. 基于約定回調的條件式回調函數

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

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