From af30eb431d03660f9be808b98cbaf056dd5ccac3 Mon Sep 17 00:00:00 2001
From: BeADre <34639100+BeADre@users.noreply.github.com>
Date: Thu, 22 Oct 2020 17:21:23 +0800
Subject: [PATCH] fix(loginUsername): add throttle for search (#39)

---
 src/utils/common.js         | 10 ++++++++++
 src/views/loginUsername.vue |  7 ++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/utils/common.js b/src/utils/common.js
index 96a2bcb..7b73fb4 100644
--- a/src/utils/common.js
+++ b/src/utils/common.js
@@ -58,3 +58,13 @@ export function shuffleAList(list) {
   });
   return newSorts;
 }
+
+export function throttle(fn, time) {
+  let isRun = false;
+  return function () {
+    if (isRun) return;
+    isRun = true;
+    fn.apply(this, arguments);
+    setTimeout(() => { isRun = false }, time);
+  }
+}
diff --git a/src/views/loginUsername.vue b/src/views/loginUsername.vue
index 3b4f809..5d4de8f 100644
--- a/src/views/loginUsername.vue
+++ b/src/views/loginUsername.vue
@@ -10,7 +10,7 @@
               <input
                 :placeholder="$t('login.searchHolder')"
                 v-model="keyword"
-                @keydown.enter="search"
+                @keydown.enter="throttleSearch"
               />
             </div>
           </div>
@@ -53,6 +53,7 @@ import NProgress from "nprogress";
 import { search } from "@/api/others";
 import Cookies from "js-cookie";
 import { userPlaylist } from "@/api/user";
+import { throttle } from '@/utils/common';
 
 import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
 
@@ -74,6 +75,7 @@ export default {
   methods: {
     ...mapMutations(["updateUser", "updateUserInfo"]),
     search() {
+      if (!this.keyword) return;
       search({ keywords: this.keyword, limit: 9, type: 1002 }).then((data) => {
         this.result = data.result.userprofiles;
         this.activeUser = this.result[0];
@@ -93,6 +95,9 @@ export default {
         this.$router.push({ path: "/library" });
       });
     },
+    throttleSearch: throttle(function () {
+      this.search();
+    }, 500)
   },
 };
 </script>