feat: add throttle

bowencool · Jan 7, 2024 · cca7cc1 · cca7cc1
1 parent 8e615a0
commit cca7cc1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/src/createModal/index.tsx b/src/createModal/index.tsx
@@ -4,13 +4,24 @@ import { CreateModalProps, CreateModalReturn, TmpComp } from './component';
 // import LocaleReceiver from 'antd/es/locale-provider/LocaleReceiver';
 // import { ModalLocale } from 'antd/es/modal/locale';
 
+let throttleLock = false;
 /**
  * @description Create a one-off modal dialog dynamically without maintenance loading and visible.
  * @description.zh-CN 动态创建一次性的模态框，不需要维护 loading 和 visible。
  */
 export default function createModal<T, R = void>(
   params: CreateModalProps<T, R>,
 ): CreateModalReturn<T, R> {
+  if (throttleLock) {
+    return {
+      destory: () => {},
+      promise: Promise.reject('throttled'),
+    };
+  }
+  throttleLock = true;
+  setTimeout(() => {
+    throttleLock = false;
+  }, 500);
   let _resolve: (value: R | PromiseLike<R>) => void, _reject: (reason?: any) => void;
   const defered = new Promise<R>((resolve, reject) => {
     _reject = reject;

diff --git a/src/createModal/useModalCreation.tsx b/src/createModal/useModalCreation.tsx
@@ -6,6 +6,8 @@ interface ElementsHolderRef {
   patchElement: ReturnType<typeof usePatchElement>[1];
 }
 let uuid = 0;
+// avoid create multi modal when user click button too fast
+let throttleLock = false;
 
 const ElementsHolder = React.memo(
   React.forwardRef<ElementsHolderRef>((_props, ref) => {
@@ -36,6 +38,16 @@ export function useModalCreation<P, Q = void>(
      * @description.zh-CN 动态创建一次性的模态框，不需要维护 loading 和 visible。
      */
     function createModal<T, R = void>(params: CreateModalProps<T, R>): CreateModalReturn<T, R> {
+      if (throttleLock) {
+        return {
+          destory: () => {},
+          promise: Promise.reject('throttled'),
+        };
+      }
+      throttleLock = true;
+      setTimeout(() => {
+        throttleLock = false;
+      }, 500);
       let _resolve: (value: R | PromiseLike<R>) => void, _reject: (reason?: any) => void;
       const defered = new Promise<R>((resolve, reject) => {
         _reject = reject;