Merge pull request #163 from brich-dev-member/dist_rollback

Use throttle instead of debounce

Author: PeachScript

src/components/InfiniteLoading.vue

@@ -67,8 +67,7 @@
         isLoading: false,
         isComplete: false,
         isFirstLoad: true, // save the current loading whether it is the first loading
-        debounceTimer: null,
-        debounceDuration: 50,
+        inThrottle: false,
         infiniteLoopChecked: false, // save the status of infinite loop check
         infiniteLoopTimer: null,
         continuousCallTimes: 0,
@@ -109,16 +108,22 @@
         default: 'bottom',
       },
       forceUseInfiniteWrapper: null,
+      throttleLimit: {
+        type: Number,
+        default: 50,
+      },
     },
     mounted() {
       this.scrollParent = this.getScrollParent();
 
       this.scrollHandler = function scrollHandlerOriginal(ev) {
         if (!this.isLoading) {
-          clearTimeout(this.debounceTimer);
-
           if (ev && ev.constructor === Event) {
-            this.debounceTimer = setTimeout(this.attemptLoad, this.debounceDuration);
+            if (!this.inThrottle) {
+              this.inThrottle = true;
+              this.attemptLoad();
+              setTimeout(() => { this.inThrottle = false; }, this.throttleLimit);
+            }
           } else {
             this.attemptLoad();
           }
@@ -160,6 +165,7 @@
         this.isLoading = false;
         this.isComplete = false;
         this.isFirstLoad = true;
+        this.inThrottle = false;
         this.scrollParent.addEventListener('scroll', this.scrollHandler);
         setTimeout(this.scrollHandler, 1);
       });

test/unit/specs/InfiniteLoading.spec.js

@@ -404,7 +404,7 @@ describe('vue-infinite-loading', () => {
     vm.$mount('#app');
   });
 
-  it('should debounce properly for the scroll event handler\n      (use div as the container and wave dots spinner)', (done) => {
+  it('should throttle properly for the scroll event handler\n      (use div as the container and wave dots spinner)', (done) => {
     vm = new Vue(Object.assign({}, basicConfig, {
       data: {
         list: [...new Array(20).join('1').split('')],
@@ -420,11 +420,11 @@ describe('vue-infinite-loading', () => {
         continuesCall(() => {
           scrollParent.scrollTop += 10;
         }, 10, () => {
-          expect(spyFn).to.have.been.callCount(0 + alreadyCalledTimes);
+          expect(spyFn).to.have.been.callCount(1 + alreadyCalledTimes);
           setTimeout(() => {
             expect(spyFn).to.have.been.callCount(1 + alreadyCalledTimes);
             done();
-          }, this.$refs.infiniteLoading.debounceDuration + 10);
+          }, this.$refs.infiniteLoading.throttleLimit + 10);
         });
       },
     }));