尝试优化选我的音乐列表内容很多时多选的卡顿问题

publish/changeLog.md

@@ -5,3 +5,8 @@
 #### 优化
 
 - 优化选择框动画效果
+- 尝试优化选我的音乐列表内容很多时多选的卡顿问题
+
+#### 修复
+
+- 修复列表延迟显示的Bug

src/renderer/components/material/Checkbox.vue

@@ -3,9 +3,9 @@ div(:class="$style.checkbox")
   input(:type="need ? 'radio' : 'checkbox'" :class="$style.input" :id="id" :disabled="disabled" :value="value" :name="name" @change="change" v-model="bool")
   label(:for="id" :class="$style.content")
     div(v-if="indeterminate" :class="$style.container")
-      svg(v-show="indeterminate" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
+      svg(v-show="indeterminate" :class="$style.icon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
         use(xlink:href='#icon-check-indeterminate')
-      svg(v-show="!indeterminate" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 0 448 512' space='preserve')
+      svg(v-show="!indeterminate" :class="$style.icon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 0 448 512' space='preserve')
         use(xlink:href='#icon-check-true')
     div(v-else :class="$style.container")
       svg(version='1.1' :class="$style.icon" xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
@@ -73,9 +73,9 @@ export default {
         let bool = this.bool
         if (this.indeterminate) {
           bool = true
-          this.$nextTick(() => {
+          // this.$nextTick(() => {
-            this.bool = true
+          this.bool = true
-          })
+          // })
         }
         checked = bool
       }

src/renderer/utils/index.js

@@ -303,3 +303,37 @@ export const throttle = (fn, delay = 100) => {
     }, delay)
   }
 }
+
+const async_removeItem = (arr, num, callback) => window.requestAnimationFrame(() => {
+  let len = arr.length
+  if (len > num) {
+    arr.splice(0, num)
+    return async_removeItem(arr, num, callback)
+  } else {
+    arr.splice(0, len)
+    return callback()
+  }
+})
+const async_addItem = (arr, newArr, num, callback) => window.requestAnimationFrame(() => {
+  let len = newArr.length
+  if (len > num) {
+    arr.push(...newArr.splice(0, num))
+    return async_addItem(arr, newArr, num, callback)
+  } else {
+    arr.push(...newArr.splice(0, len))
+    return callback()
+  }
+})
+/**
+ * 异步设置数组
+ * @param {*} from 原数组
+ * @param {*} to 设置后的数组内容
+ * @param {*} num 每次设置的个数
+ */
+export const asyncSetArray = (from, to, num = 100) => new Promise(resolve => {
+  async_removeItem(from, num, () => {
+    async_addItem(from, Array.from(to), num, () => {
+      resolve()
+    })
+  })
+})

src/renderer/views/List.vue

@@ -47,7 +47,7 @@
 
 <script>
 import { mapMutations, mapGetters, mapActions } from 'vuex'
-import { throttle } from '../utils'
+import { throttle, asyncSetArray } from '../utils'
 export default {
   name: 'List',
   data() {
@@ -66,6 +66,7 @@ export default {
       routeLeaveLocation: null,
       isShowListAdd: false,
       isShowListAddMultiple: false,
+      delayTimeout: null,
     }
   },
   computed: {
@@ -146,6 +147,7 @@ export default {
   // }
   // },
   beforeRouteLeave(to, from, next) {
+    this.clearDelayTimeout()
     this.routeLeaveLocation = (this.list.length && this.$refs.dom_scrollContent.scrollTop) || 0
     next()
   },
@@ -170,8 +172,10 @@ export default {
       setPlayList: 'setList',
     }),
     handleDelayShow() {
+      this.clearDelayTimeout()
       if (this.list.length > 150) {
-        setTimeout(() => {
+        this.delayTimeout = setTimeout(() => {
+          this.delayTimeout = null
           this.delayShow = true
           this.restoreScroll()
         }, 200)
@@ -180,7 +184,14 @@ export default {
         this.restoreScroll()
       }
     },
+    clearDelayTimeout() {
+      if (this.delayTimeout) {
+        clearTimeout(this.delayTimeout)
+        this.delayTimeout = null
+      }
+    },
     restoreScroll() {
+      if (!this.list.length) return
       let location = this.setting.list.scroll.locations[this.listId]
       if (this.setting.list.scroll.enable && location) {
         this.$nextTick(() => {
@@ -238,7 +249,7 @@ export default {
       this.isShowDownload = false
     },
     handleSelectAllData(isSelect) {
-      this.selectdData = isSelect ? [...this.list] : []
+      asyncSetArray(this.selectdData, isSelect ? [...this.list] : [])
     },
     resetSelect() {
       this.isSelectAll = false