feat: allow throttling update calls (#764)

Author: pulsejet

packages/vue-virtual-scroller/README.md

@@ -187,6 +187,7 @@ When the user scrolls inside RecycleScroller, the views are mostly just moved ar
 - `prerender` (default: `0`): render a fixed number of items for Server-Side Rendering (SSR).
 - `buffer` (default: `200`): amount of pixel to add to edges of the scrolling visible area to start rendering items further away.
 - `emitUpdate` (default: `false`): emit a `'update'` event each time the virtual scroller content is updated (can impact performance).
+- `updateInterval` (default: `0`): the interval in ms at which the view will be checked for updates after scrolling. When set to `0`, checked will happen during the next animation frame.
 - `listClass` (default: `''`): custom classes added to the item list wrapper.
 - `itemClass` (default: `''`): custom classes added to each item.
 - `listTag` (default: `'div'`): the element to render as the list's wrapper.

packages/vue-virtual-scroller/src/components/RecycleScroller.vue

@@ -148,6 +148,11 @@ export default {
       default: false,
     },
 
+    updateInterval: {
+      type: Number,
+      default: 0,
+    },
+
     skipHover: {
       type: Boolean,
       default: false,
@@ -341,17 +346,29 @@ export default {
     handleScroll (event) {
       if (!this.$_scrollDirty) {
         this.$_scrollDirty = true
-        requestAnimationFrame(() => {
+        if (this.$_updateTimeout) return
+
+        const requestUpdate = () => requestAnimationFrame(() => {
           this.$_scrollDirty = false
           const { continuous } = this.updateVisibleItems(false, true)
 
           // 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)
+            this.$_refreshTimout = setTimeout(this.handleScroll, this.updateInterval + 100)
           }
         })
+
+        requestUpdate()
+
+        // Schedule the next update with throttling
+        if (this.updateInterval) {
+          this.$_updateTimeout = setTimeout(() => {
+            this.$_updateTimeout = 0
+            if (this.$_scrollDirty) requestUpdate();
+          }, this.updateInterval)
+        }
       }
     },
 
@@ -607,7 +624,7 @@ export default {
       // After the user has finished scrolling
       // Sort views so text selection is correct
       clearTimeout(this.$_sortTimer)
-      this.$_sortTimer = setTimeout(this.sortViews, 300)
+      this.$_sortTimer = setTimeout(this.sortViews, this.updateInterval + 300)
 
       return {
         continuous,