fix: slowly when many items checked

yujinpan · Sep 30, 2024 · d8516e7 · d8516e7
1 parent 78c44fe
commit d8516e7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/components/CacheOption.ts b/src/components/CacheOption.ts
@@ -2,6 +2,8 @@ import Vue from 'vue';
 
 import type { PropType } from 'vue';
 
+import { debounce } from '@/components/utils';
+
 export type CacheOption = {
   value: string | number | boolean | object;
   currentLabel: string | number;
@@ -24,9 +26,6 @@ const CacheOptions = Vue.extend({
     data() {
       this.update();
     },
-    values() {
-      this.update();
-    },
   },
   methods: {
     update() {
@@ -58,6 +57,8 @@ const CacheOptions = Vue.extend({
     return undefined;
   },
   mounted() {
+    this.update = debounce(this.update, 100);
+
     this.update();
   },
 });

diff --git a/src/components/utils.ts b/src/components/utils.ts
@@ -295,6 +295,19 @@ export const banReactive = (obj: Obj) => {
   return obj;
 };
 
+export function debounce<T extends (...args: any[]) => any>(
+  cb: T,
+  duration: number,
+): T {
+  let timeId: any;
+  return ((...args) => {
+    if (timeId) clearTimeout(timeId);
+    timeId = setTimeout(() => {
+      cb(...args);
+    }, duration);
+  }) as T;
+}
+
 export function throttle<T extends (...args: any[]) => any>(
   cb: T,
   duration: number,