feat: add debounce props

Author: karl

src/components/DynamicScroller.vue

@@ -4,6 +4,7 @@
     :items="itemsWithSize"
     :min-item-size="minItemSize"
     :direction="direction"
+    :debounce="debounce"
     key-field="id"
     v-bind="$attrs"
     @resize="onScrollerResize"

src/components/RecycleScroller.vue

@@ -191,6 +191,7 @@ export default {
 
   beforeDestroy () {
     this.removeListeners()
+    clearTimeout(this.scrollTimeout)
   },
 
   methods: {
@@ -236,19 +237,29 @@ export default {
     },
 
     handleScroll (event) {
-      if (!this.$_scrollDirty) {
-        this.$_scrollDirty = true
-        requestAnimationFrame(() => {
-          this.$_scrollDirty = false
-          const { continuous } = this.updateVisibleItems(false)
-
-          // It seems sometimes chrome doesn't fire scroll event :/
-          // When non continous scrolling is ending, we force a refresh
-          if (!continuous) {
-            clearTimeout(this.$_refreshTimout)
-            this.$_refreshTimout = setTimeout(this.handleScroll, 100)
-          }
-        })
+      const job = () => {
+        if (!this.$_scrollDirty) {
+          this.$_scrollDirty = true
+          requestAnimationFrame(() => {
+            this.$_scrollDirty = false
+            const { continuous } = this.updateVisibleItems(false)
+
+            // It seems sometimes chrome doesn't fire scroll event :/
+            // When non continous scrolling is ending, we force a refresh
+            if (!continuous) {
+              clearTimeout(this.$_refreshTimeout)
+              this.$_refreshTimeout = setTimeout(this.handleScroll, 100)
+            }
+          })
+        }
+      }
+
+      clearTimeout(this.scrollTimeout)
+
+      if (this.debounce) {
+        this.scrollTimeout = setTimeout(job, parseInt(this.debounce))
+      } else {
+        job()
       }
     },
 

src/components/common.js

@@ -14,6 +14,11 @@ export const props = {
     default: 'vertical',
     validator: (value) => ['vertical', 'horizontal'].includes(value),
   },
+
+  debounce: {
+    type: [Number, String],
+    default: 0,
+  },
 }
 
 export function simpleArray () {