Add debounce support.

Author: tangbc

README.md

@@ -104,11 +104,14 @@ new Vue({
 
 ## Props type
 
+<img height="180" src="https://tangbc.github.io/github-images/vitual-scroll-list-3.png">
+
 *Prop* | *Type* | *Required* | *Description* |
 :--- | :--- | :--- | :--- |
 | size | Number | ✓ | Each list item height, currently only supports fixed height. |
 | remain | Number | ✓ | How many items should be shown in virtual-list viewport, so `size` and `remain` will determine the virtual-list outside container height (size × remian). |
 | start | Number | * | Default value is `0`, the initial scroll start index. It must be integer and in the range of list index, throws a warning if index does not exist.  |
+| debounce | Number | * | Milliseconds of using `debounce` function to ensure scroll event doesn't fire so often that it bricks browser performance, it's disabled by default. |
 | rtag | String | * | Default value is `div`, the virtual-list's root HTMLElement tag name, in all case it's style is set to `display: block;` |
 | rclass | String | * | Default value is an empty string, the virtual-list's root HTMLElement tag's classes. Has the same API has [`v-bind:class`](https://vuejs.org/v2/guide/class-and-style.html) |
 | wtag | String | * | Default value is `div`, the virtual-list's item wrapper HTMLElement tag name, in all case it's style is set to `display: block;` |

index.js

@@ -15,6 +15,26 @@
 
     var innerns = 'vue-virtual-scroll-list'
 
+    var _debounce = function (func, wait, immediate) {
+        var timeout
+        return function () {
+            var context = this
+            var args = arguments
+            var later = function () {
+                timeout = null
+                if (!immediate) {
+                    func.apply(context, args)
+                }
+            }
+            var callNow = immediate && !timeout
+            clearTimeout(timeout)
+            timeout = setTimeout(later, wait)
+            if (callNow) {
+                func.apply(context, args)
+            }
+        }
+    }
+
     return Vue2.component(innerns, {
         props: {
             size: { type: Number, required: true },
@@ -24,6 +44,7 @@
             wtag: { type: String, default: 'div' },
             wclass: { type: String, default: '' },
             start: { type: Number, default: 0 },
+            debounce: { type: Number, default: 0 },
             totop: Function,
             tobottom: Function,
             onscroll: Function
@@ -207,6 +228,7 @@
         render: function (createElement) {
             var showList = this.filter(this.$slots.default)
             var delta = this.delta
+            var dbc = this.debounce
 
             return createElement(this.rtag, {
                 'ref': 'container',
@@ -216,7 +238,7 @@
                     'height': delta.viewHeight + 'px'
                 },
                 'on': {
-                    'scroll': this.handleScroll
+                    'scroll': dbc ? _debounce(this.handleScroll.bind(this), dbc) : this.handleScroll
                 },
                 'class': this.rclass
             }, [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-virtual-scroll-list",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "A vue (2.x) component that support big data and infinite loading by using virtual scroll list.",
   "main": "index.js",
   "files": [