函数式弹窗组件优化

src/utils/auxiliaryFunction/index.ts

@@ -6,33 +6,45 @@
  */
 export function throttle<T extends (...args: any[]) => any>(
   func: T,
-  delay: number
+  delay: number = 300
 ): (...args: Parameters<T>) => void {
   let lastExecTime = 0;
-  let timer: ReturnType<typeof setTimeout> | null = null;
 
   return function (this: ThisParameterType<T>, ...args: Parameters<T>) {
     const now = Date.now();
 
-    // 如果距离上次执行时间超过延迟时间，则立即执行
+    // 只有超过延迟时间才执行
     if (now - lastExecTime >= delay) {
       func.apply(this, args);
       lastExecTime = now;
-    } else {
-      // 否则延迟执行，避免频繁触发
-      if (timer) clearTimeout(timer);
-      timer = setTimeout(
-        () => {
-          func.apply(this, args);
-          lastExecTime = Date.now();
-          timer = null;
-        },
-        delay - (now - lastExecTime)
-      );
     }
   };
 }
 
+/**
+ * 防抖函数
+ * @param func 需要防抖的函数
+ * @param delay 延迟时间（毫秒）
+ * @returns 防抖后的函数
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number = 300
+): (...args: Parameters<T>) => void {
+  let timeoutId: NodeJS.Timeout | null = null;
+
+  return function (this: ThisParameterType<T>, ...args: Parameters<T>) {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(() => {
+      func.apply(this, args);
+      timeoutId = null;
+    }, delay);
+  };
+}
+
 /**
  * 将文件路径数组转换为对象数组
  * @param filePaths 文件路径数组或单个文件路径字符串

src/utils/functionDialogBox/index.ts

@@ -1,6 +1,7 @@
 import { ElButton, ElDialog } from "element-plus";
 import { Component, DefineComponent } from "vue";
 import { h, createApp } from "vue";
+import { debounce, throttle } from "@/utils/auxiliaryFunction";
 
 // 定义模态框属性接口
 interface ModalProps {
@@ -23,6 +24,7 @@ export const functionDialogBox = (
 ): DialogInstance => {
   const open = ref(true);
   const formRef = ref();
+  const isLoading = ref(false);
   const dialog = () =>
     h(
       ElDialog,
@@ -42,22 +44,15 @@ export const functionDialogBox = (
             ElButton,
             {
               type: "primary",
-              async onClick() {
-                await formRef.value?.submit?.();
-                const awd = formRef.value?.getForm?.();
-                modalProps?.ok?.(awd);
-                unmount();
-              },
+              loading: isLoading.value,
+              onClick: confirm,
             },
             () => "确定"
           ),
           h(
             ElButton,
             {
-              onClick() {
-                modalProps?.cancel?.();
-                unmount();
-              },
+              onClick: cancel,
             },
             () => "取消"
           ),
@@ -74,7 +69,21 @@ export const functionDialogBox = (
   function unmount() {
     open.value = false;
   }
-
+  const confirm = throttle(async () => {
+    isLoading.value = true;
+    try {
+      await formRef.value?.submit?.();
+      const formData = formRef.value?.getForm?.();
+      modalProps?.ok?.(formData);
+      unmount();
+    } finally {
+      isLoading.value = false;
+    }
+  });
+  const cancel = throttle(() => {
+    modalProps?.cancel?.();
+    unmount();
+  });
   return {
     unmount,
   };