diff --git a/src/components/InfiniteLoading.vue b/src/components/InfiniteLoading.vue index 1864932..9b38e58 100644 --- a/src/components/InfiniteLoading.vue +++ b/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); }); diff --git a/test/unit/specs/InfiniteLoading.spec.js b/test/unit/specs/InfiniteLoading.spec.js index e55fecc..68c0312 100644 --- a/test/unit/specs/InfiniteLoading.spec.js +++ b/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); }); }, }));