✨ add Debounce and Throttle

2024-08-22 23:58:29 +08:00
parent 57a56ec5ef
commit d91e683e87
4 changed files with 106 additions and 28 deletions
--- a/src/views/Forget/ForgetPage.vue
+++ b/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);
+
 /**
 * 获取旋转验证码数据
 */
--- a/src/views/Login/LoginFooter.vue
+++ b/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="openGiteeUrl" class="login-form-bottom-button"
+      <AButton @click="openQQbUrlDebounce" class="login-form-bottom-button" :icon="h(QqOutlined)"></AButton>
+      <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();
--- a/src/views/Login/LoginPage.vue
+++ b/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
--- a/src/views/QRLogin/QRLoginFooter.vue
+++ b/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="openGiteeUrl" class="qrlogin-form-bottom-button"
+      <AButton @click="openQQbUrlDebounce" class="qrlogin-form-bottom-button" :icon="h(QqOutlined)"></AButton>
+      <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();