加入防抖，提升缓存表单的性能

wangbokun · Mar 22, 2020 · 6f6a3cd · 6f6a3cd
1 parent 819c835
commit 6f6a3cd
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "clipboard": "^2.0.4",
     "core-js": "^3.4.3",
     "file-saver": "^2.0.2",
+    "throttle-debounce": "^2.1.0",
     "vuedraggable": "^2.23.2"
   },
   "devDependencies": {

diff --git a/src/utils/db.js b/src/utils/db.js
@@ -20,6 +20,7 @@ export function getDrawingList() {
 }
 
 export function saveDrawingList(list) {
+  console.log('saveDrawingList', list)
   localStorage.setItem(DRAWING_ITEMS, JSON.stringify(list))
 }
 

diff --git a/src/views/index/Home.vue b/src/views/index/Home.vue
@@ -149,6 +149,7 @@
 
 <script>
 import draggable from 'vuedraggable'
+import { debounce } from 'throttle-debounce'
 import { saveAs } from 'file-saver'
 import beautifier from 'beautifier'
 import ClipboardJS from 'clipboard'
@@ -207,7 +208,9 @@ export default {
       dialogVisible: false,
       generateConf: null,
       showFileName: false,
-      activeData: drawingDefalut[0]
+      activeData: drawingDefalut[0],
+      saveDrawingListDebounce: debounce(340, saveDrawingList),
+      saveIdGlobalDebounce: debounce(340, saveIdGlobal)
     }
   },
   computed: {
@@ -232,14 +235,14 @@ export default {
     },
     drawingList: {
       handler(val) {
-        saveDrawingList(val)
+        this.saveDrawingListDebounce(val)
         if (val.length === 0) this.idGlobal = 100
       },
       deep: true
     },
     idGlobal: {
       handler(val) {
-        saveIdGlobal(val)
+        this.saveIdGlobalDebounce(val)
       },
       immediate: true
     }

diff --git a/yarn.lock b/yarn.lock
@@ -7870,6 +7870,11 @@ thread-loader@^2.1.3:
     loader-utils "^1.1.0"
     neo-async "^2.6.0"
 
+throttle-debounce@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-2.1.0.tgz#257e648f0a56bd9e54fe0f132c4ab8611df4e1d5"
+  integrity sha1-JX5kjwpWvZ5U/g8TLEq4YR304dU=
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,7 @@ export function getDrawingList() { @@
     }
     export function saveDrawingList(list) {
+      console.log('saveDrawingList', list)
       localStorage.setItem(DRAWING_ITEMS, JSON.stringify(list))
     }
@@ Expand Down @@