✨ add Debounce and Throttle

src/views/Forget/ForgetPage.vue

@@ -62,7 +62,7 @@
               </AInputPassword>
             </AFormItem>
             <AFormItem>
-              <AButton @click="resetPasswordSubmit" style="width: 100%;" type="primary" size="large">{{
+              <AButton @click="resetPassword" style="width: 100%;" type="primary" size="large">{{
                   t("login.resetPassword")
                 }}
               </AButton>
@@ -103,6 +103,7 @@ import {Rule} from "ant-design-vue/lib/form";
 import {checkRotatedCaptcha, getRotatedCaptchaData} from "@/api/captcha";
 import {message} from "ant-design-vue";
 import {resetPasswordApi, sendMessage} from "@/api/user";
+import {useDebounceFn} from "@vueuse/core";
 
 const router = useRouter();
 const {t} = useI18n();
@@ -118,7 +119,7 @@ const resetPasswordRotateEvent = {
     showRotateCaptcha.value = false;
   },
   refresh: () => {
-    getRotateCaptcha();
+    refreshCaptcha();
   },
 };
 const ResetPasswordForm: UnwrapRef<ResetPassword> = reactive({
@@ -231,6 +232,11 @@ async function sendCaptcha() {
       });
 }
 
+/**
+ * 重置密码表单提交  防抖
+ */
+const resetPassword = useDebounceFn(resetPasswordSubmit, 1000);
+
 /**
  * 重置密码表单提交
  */
@@ -251,6 +257,11 @@ async function resetPasswordSubmit() {
       });
 }
 
+/**
+ * 刷新验证码  节流
+ */
+const refreshCaptcha = useDebounceFn(getRotateCaptcha, 3000);
+
 /**
  * 获取旋转验证码数据
  */

src/views/Login/LoginFooter.vue

@@ -6,14 +6,14 @@
           router.push('/qrlogin')
       }" class="login-form-bottom-button" :icon="h(QrcodeOutlined)">{{ t("login.qrLogin") }}
       </AButton>
-      <AButton @click="openQQUrl" class="login-form-bottom-button" :icon="h(QqOutlined)"></AButton>
+      <AButton @click="openQQbUrlDebounce" class="login-form-bottom-button" :icon="h(QqOutlined)"></AButton>
-      <AButton @click="openGiteeUrl" class="login-form-bottom-button"
+      <AButton @click="openGiteebUrlDebounce" class="login-form-bottom-button"
                style="display: flex; align-items: center;justify-content: center;">
         <template #icon>
           <img :src=gitee alt="gitee" class="gitee-icon" style="width: 16px; height: 16px;"/>
         </template>
       </AButton>
-      <AButton @click="openGithubUrl" class="login-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
+      <AButton @click="openGithubUrlDebounce" class="login-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
     </AFlex>
   </div>
 </template>
@@ -29,6 +29,7 @@ import {message} from "ant-design-vue";
 import gitee from "@/assets/svgs/gitee.svg";
 import {generateClientId} from "@/api/oauth/wechat.ts";
 import {getQQUrl} from "@/api/oauth/qq.ts";
+import {useDebounceFn} from "@vueuse/core";
 
 const router = useRouter();
 const {t} = useI18n();
@@ -94,10 +95,15 @@ function getLocalClientId(): string | null {
   }
 }
 
+/**
+ * Open the Github OAuth page in a new window with debounce
+ */
+const openGithubUrlDebounce = useDebounceFn(openGithubUrl, 1000);
+
 /**
  * Open the Github OAuth page in a new window
  */
-const openGithubUrl = () => {
+function openGithubUrl() {
   const iWidth = 800;                         //弹出窗口的宽度;
   const iHeight = 500;                        //弹出窗口的高度;
   //window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
@@ -124,11 +130,17 @@ const openGithubUrl = () => {
     }
   };
   window.addEventListener("message", messageHandler);
-};
+}
+
+/**
+ * Open the Gitee OAuth page in a new window with debounce
+ */
+const openGiteebUrlDebounce = useDebounceFn(openGiteeUrl, 1000);
+
 /**
  * Open the Gitee OAuth page in a new window
  */
-const openGiteeUrl = () => {
+function openGiteeUrl() {
   const iWidth = 800;                         //弹出窗口的宽度;
   const iHeight = 500;                        //弹出窗口的高度;
   //window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
@@ -156,11 +168,17 @@ const openGiteeUrl = () => {
     }
   };
   window.addEventListener("message", messageHandler);
-};
+}
+
+/**
+ * Open the QQ OAuth page in a new window with debounce
+ */
+const openQQbUrlDebounce = useDebounceFn(openQQUrl, 1000);
+
 /**
  * Open the QQ OAuth page in a new window
  */
-const openQQUrl = () => {
+function openQQUrl() {
   const iWidth = 800;                         //弹出窗口的宽度;
   const iHeight = 500;                        //弹出窗口的高度;
   //window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
@@ -187,7 +205,7 @@ const openQQUrl = () => {
     }
   };
   window.addEventListener("message", messageHandler);
-};
+}
 
 onBeforeMount(() => {
   getGithubRedirectUrl();

src/views/Login/LoginPage.vue

@@ -46,7 +46,8 @@
                         <SafetyOutlined/>
                       </template>
                     </AInput>
-                    <AButton v-if="!state.showCountDown" @click="sendCaptcha" style="margin-left: 10px" size="large">{{
+                    <AButton v-if="!state.showCountDown" @click="sendCaptchaThrottle" style="margin-left: 10px"
+                             size="large">{{
                         t("login.sendCaptcha")
                       }}
                     </AButton>
@@ -67,7 +68,7 @@
 
               </AFormItem>
               <AFormItem>
-                <AButton @click="phoneLoginSubmit" type="primary" size="large" class="login-form-button">
+                <AButton @click="phoneLoginSubmitDebounce" type="primary" size="large" class="login-form-button">
                   {{ t("login.loginAndRegister") }}
                 </AButton>
               </AFormItem>
@@ -118,7 +119,7 @@
 
               </AFormItem>
               <AFormItem>
-                <AButton @click="accountLoginSubmit" type="primary" size="large" class="login-form-button">
+                <AButton @click="accountLoginSubmitDebounce" type="primary" size="large" class="login-form-button">
                   {{
                     t("login.login")
                   }}
@@ -191,6 +192,7 @@ import {checkRotatedCaptcha, getRotatedCaptchaData} from "@/api/captcha";
 import {message} from "ant-design-vue";
 import {accountLoginApi, phoneLoginApi, sendMessage} from "@/api/user";
 import useStore from "@/store";
+import {useDebounceFn, useThrottleFn} from "@vueuse/core";
 
 const router = useRouter();
 const {t} = useI18n();
@@ -202,24 +204,24 @@ const captchaData = reactive({angle: 0, image: "", thumb: "", key: ""});
 const captchaErrorCount = ref<number>(0);
 const phoneLoginRotateEvent = {
   confirm: (angle: number) => {
-    checkPhoneLoginCaptcha(angle);
+    checkPhoneLoginCaptchaDebounce(angle);
   },
   close: () => {
     showPhoneRotateCaptcha.value = false;
   },
   refresh: () => {
-    getRotateCaptcha();
+    refreshCaptcha();
   },
 };
 const accountLoginRotateEvent = {
   confirm: (angle: number) => {
-    checkAccountLoginCaptcha(angle);
+    checkAccountLoginCaptchaDebounce(angle);
   },
   close: () => {
     showAccountRotateCaptcha.value = false;
   },
   refresh: () => {
-    getRotateCaptcha();
+    refreshCaptcha();
   },
 };
 // 账号登录表单数据
@@ -264,7 +266,7 @@ const rules: Record<string, Rule[]> = {
   ]
 };
 
-const state = reactive({
+const state: any = reactive<any>({
   countDownTime: 60,
   showCountDown: false,
 });
@@ -307,6 +309,11 @@ onMounted(() => {
   }
 });
 
+/**
+ *  发送验证码节流
+ */
+const sendCaptchaThrottle = useThrottleFn(sendCaptcha, 3000);
+
 /**
  * 发送验证码
  */
@@ -323,6 +330,11 @@ async function sendCaptcha() {
       });
 }
 
+/**
+ *  账号登录  防抖
+ */
+const accountLoginSubmitDebounce = useDebounceFn(accountLoginSubmit, 3000);
+
 /**
  * 账号登录提交
  */
@@ -339,6 +351,11 @@ async function accountLoginSubmit() {
       });
 }
 
+/**
+ * 手机登录提交  防抖
+ */
+const phoneLoginSubmitDebounce = useDebounceFn(phoneLoginSubmit, 3000);
+
 /**
  * 手机登录提交
  */
@@ -367,6 +384,11 @@ async function phoneLoginSubmit() {
       });
 }
 
+/**
+ * 刷新验证码  节流
+ */
+const refreshCaptcha = useThrottleFn(getRotateCaptcha, 3000);
+
 /**
  * 获取旋转验证码数据
  */
@@ -383,6 +405,11 @@ async function getRotateCaptcha() {
   }
 }
 
+/**
+ *  检查手机登录旋转验证码   防抖
+ */
+const checkPhoneLoginCaptchaDebounce = useDebounceFn(checkPhoneLoginCaptcha, 500);
+
 /**
  * 验证旋转验证码
  * @param angle
@@ -413,6 +440,11 @@ async function checkPhoneLoginCaptcha(angle: number) {
   }
 }
 
+/**
+ * 检查账户登录旋转验证码  防抖
+ */
+const checkAccountLoginCaptchaDebounce = useDebounceFn(checkAccountLoginCaptcha, 500);
+
 /**
  * 检查账户登录旋转验证码
  * @param angle

src/views/QRLogin/QRLoginFooter.vue

@@ -6,14 +6,14 @@
           router.push('/login')
       }" class="qrlogin-form-bottom-button" :icon="h(TabletOutlined)">{{ t("login.phoneLoginAndRegister") }}
       </AButton>
-      <AButton @click="openQQUrl" class="qrlogin-form-bottom-button" :icon="h(QqOutlined)"></AButton>
+      <AButton @click="openQQbUrlDebounce" class="qrlogin-form-bottom-button" :icon="h(QqOutlined)"></AButton>
-      <AButton @click="openGiteeUrl" class="qrlogin-form-bottom-button"
+      <AButton @click="openGiteebUrlDebounce" class="qrlogin-form-bottom-button"
                style="display: flex; align-items: center;justify-content: center;">
         <template #icon>
           <img :src=gitee alt="gitee" class="gitee-icon" style="width: 16px; height: 16px;"/>
         </template>
       </AButton>
-      <AButton @click="openGithubUrl" class="qrlogin-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
+      <AButton @click="openGithubUrlDebounce" class="qrlogin-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
     </AFlex>
   </div>
 </template>
@@ -29,6 +29,7 @@ import {message} from "ant-design-vue";
 import gitee from "@/assets/svgs/gitee.svg";
 import {generateClientId} from "@/api/oauth/wechat.ts";
 import {getQQUrl} from "@/api/oauth/qq.ts";
+import {useDebounceFn} from "@vueuse/core";
 
 const router = useRouter();
 const {t} = useI18n();
@@ -95,10 +96,15 @@ function getLocalClientId(): string | null {
   }
 }
 
+/**
+ * Open the Github OAuth page in a new window with debounce
+ */
+const openGithubUrlDebounce = useDebounceFn(openGithubUrl, 1000);
+
 /**
  * Open the Github OAuth page in a new window
  */
-const openGithubUrl = () => {
+function openGithubUrl() {
   const iWidth = 800;                         //弹出窗口的宽度;
   const iHeight = 500;                        //弹出窗口的高度;
   //window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
@@ -125,11 +131,17 @@ const openGithubUrl = () => {
     }
   };
   window.addEventListener("message", messageHandler);
-};
+}
+
+/**
+ * Open the Gitee OAuth page in a new window with debounce
+ */
+const openGiteebUrlDebounce = useDebounceFn(openGiteeUrl, 1000);
+
 /**
  * Open the Gitee OAuth page in a new window
  */
-const openGiteeUrl = () => {
+function openGiteeUrl() {
   const iWidth = 800;                         //弹出窗口的宽度;
   const iHeight = 500;                        //弹出窗口的高度;
   //window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
@@ -157,13 +169,17 @@ const openGiteeUrl = () => {
     }
   };
   window.addEventListener("message", messageHandler);
-};
+}
 
+/**
+ * Open the QQ OAuth page in a new window with debounce
+ */
+const openQQbUrlDebounce = useDebounceFn(openQQUrl, 1000);
 
 /**
  * Open the QQ OAuth page in a new window
  */
-const openQQUrl = () => {
+function openQQUrl() {
   const iWidth = 800;                         //弹出窗口的宽度;
   const iHeight = 500;                        //弹出窗口的高度;
   //window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
@@ -190,7 +206,8 @@ const openQQUrl = () => {
     }
   };
   window.addEventListener("message", messageHandler);
-};
+}
+
 onBeforeMount(() => {
   getGithubRedirectUrl();
   getGiteeRedirectUrl();