fix: 🧩 添加debounce防抖函数

truthRestorer · Aug 9, 2023 · 32a0ec5 · 32a0ec5
1 parent 06a5706
commit 32a0ec5
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/packages/web/src/components/Package.vue b/packages/web/src/components/Package.vue
@@ -3,6 +3,7 @@ import type { CSSProperties } from 'vue'
 import { onMounted, ref } from 'vue'
 import echarts from '../plugins/echarts'
 import { Chart, initData } from '../utils/index'
+import { debounce } from '../utils/debounce'
 
 const lengend = ref<'树图' | '引力图'>('树图')
 const pkg = ref()
@@ -12,14 +13,14 @@ const pkgCirculated = ref()
 const { nodes, links, tree, relations, versions } = await initData()
 const c = new Chart(nodes, links, tree, relations, versions)
 
-function handlerSearch() {
+const handlerSearch = debounce(() => {
   const searchResult = c.fuzzySearch(pkg.value)
   if (searchResult) {
     pkgInfo.value = searchResult
     pkgVersions.value = c.getVersions(searchResult.name)
     pkgCirculated.value = c.circulatedPkg(searchResult.name)
   }
-}
+})
 
 const jsonViewerStyle: CSSProperties = {
   'flex': 1,
@@ -103,21 +104,22 @@ div, input {
   flex-direction: column;
 }
 
-.versions, .info {
-  width: 15%;
+.versions {
+  width: 250px;
+}
+.info {
+  width: 280px;
 }
 .versions > div {
   flex: 1;
   overflow: hidden;
 }
-.info {
-  width: 17%;
-}
+
 .pkgSearch {
   outline-style: none ;
   border: 1px solid #ccc;
   border-radius: 4px;
-  padding: 12px 16px;
+  padding: 12px 8px;
   font-size: 26px;
   width: 100%;
 }

diff --git a/packages/web/src/utils/chart.ts b/packages/web/src/utils/chart.ts
@@ -76,7 +76,7 @@ export class Chart {
           force: {
             repulsion: 150,
             layoutAnimation: true,
-            friction: 0.2,
+            friction: 0.15,
           },
           roam: true,
         },
@@ -135,7 +135,7 @@ export class Chart {
   }
 
   getVersions(name: string) {
-    return this.versions[name] ?? this.relations[name]?.version ?? []
+    return this.versions[name] ?? []
   }
 
   fuzzySearch(name: string) {

diff --git a/packages/web/src/utils/debounce.ts b/packages/web/src/utils/debounce.ts
@@ -0,0 +1,11 @@
+export function debounce(fn: () => any) {
+  let timer: NodeJS.Timeout | null = null
+  // 原始函数的参数args
+  return function () {
+    if (timer)
+      clearTimeout(timer)
+    timer = setTimeout(() => {
+      fn()
+    }, 200)
+  }
+}