JS实现"上次操作未完成禁止新操作"逻辑特事特办方案

document.addEventListener('click', (() => {
    let lock = false;
    return () => {
        if(lock) return;
        lock = true;
        console.log('clicked');
        // 为了方便测试就使用延时了
        setTimeout(() => {
            lock = false;
        }, Math.random() * 4e3)
    }
})());

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

button.addEventListener('click', conditioned((release) => {
    return () => {
        console.log('clicked');
        setTimeout(() => {
            release(); // 释放 lock
        }, Math.random() * 4e3);
    }
}));

function conditioned(callback:(...args:any[]) => Promise<any>){
    let lock = false;
    return function(...args:any[]){
        if(lock) return;
        lock = true;
        try {
            await callback.call(this, ...args);
            lock = false;
        } catch(err) {
            lock = false;
            throw err;
        }
    }
}

button.addEventListener('click', conditioned(() => {
  return new Promise((resolve) => {
      console.log('clicked');
      setTimeout(() => {
          resolve(); // 释放 lock
      }, Math.random() * 4e3);
  });
}));

import { useRef } from 'react';
function useCondition(callback: (...args: any[]) => Promise<any>) {
  const lock = useRef(false);
  return async (...args:any[]) => {
    if(lock.current) return;
    lock.current = true;
    try{
      await callback(...args);
      lock.current = false
    } catch(error){
      lock.current = false;
      throw error;
    }
  };
}

<button
  onClick={useCondition(() => {
    return new Promise<void>((resolve) => {
      console.log('clicked');
      setTimeout(() => {
          resolve(); // 释放 lock
      }, Math.random() * 4e3);
    });
  })}
>测试</button>