From 6e961e73169e55ce6b79cc5ad72bc7cdcf388920 Mon Sep 17 00:00:00 2001 From: Oren Farhi Date: Wed, 21 Feb 2018 12:20:20 +0200 Subject: [PATCH] fix(throttle): fix issue of long time to fire event --- .gitignore | 3 +- CHANGELOG.md | 4 +++ README.md | 2 +- package.json | 4 +-- src/modules/infinite-scroll.directive.ts | 2 +- tests/services/scroll-register.spec.ts | 39 +++++++++++++++++++++--- 6 files changed, 44 insertions(+), 10 deletions(-) diff --git a/.gitignore b/.gitignore index e03ab969..b32ae513 100644 --- a/.gitignore +++ b/.gitignore @@ -60,4 +60,5 @@ $ cat .gitignore *.tgz npm-debug.* -examples/ \ No newline at end of file +examples/ +package-lock.json \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index d9ae0e7c..ade01866 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## v 0.8.3 (2018/02/21) +* [FIX] - fix for #198 - takes a long time for onscroll to fire +* [UPDATE] - default value for throttle changed to 150 + ## v 0.8.2 (2018/01/07) * [FIX] - fix for #221 - action not fired on Windows scrolling * [FIX] - fix for #228 - scrolling back up to the top of the list and then scroll down doesn't trigger event diff --git a/README.md b/README.md index a4fbd512..04f7567f 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ Currently supported attributes: * **infiniteScrollDistance**<_number_> - (optional, default: **2**) - the bottom percentage point of the scroll nob relatively to the infinite-scroll container (i.e, 2 (2 * 10 = 20%) is event is triggered when 80% (100% - 20%) has been scrolled). if container.height is 900px, when the container is scrolled to or past the 720px, it will fire the scrolled event. * **infiniteScrollUpDistance**<_number_> - (optional, default: **1.5**) - should get a number -* **infiniteScrollThrottle**<_number_> - (optional, default: **300**) - should get a number of **milliseconds** for throttle. The event will be triggered this many milliseconds after the user *stops* scrolling. +* **infiniteScrollThrottle**<_number_> - (optional, default: **150**) - should get a number of **milliseconds** for throttle. The event will be triggered this many milliseconds after the user *stops* scrolling. * **infiniteScrollContainer**<_string|HTMLElement_> - (optional, default: null) - should get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty. * **scrolled**<_function_> - this will callback if the distance threshold has been reached on a scroll down. * **scrolledUp**<_function_> - (event: InfiniteScrollEvent) - this will callback if the distance threshold has been reached on a scroll up. diff --git a/package.json b/package.json index 1f011507..3c5cc937 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-infinite-scroll", - "version": "0.8.2", + "version": "0.8.3", "description": "An infinite scroll directive for Angular compatible with AoT compilation and Tree shaking", "main": "./bundles/ngx-infinite-scroll.umd.js", "module": "./modules/ngx-infinite-scroll.es5.js", @@ -61,7 +61,7 @@ "karma-webpack": "2.0.3", "reflect-metadata": "0.1.10", "rollup": "0.41.6", - "rxjs": "5.2.0", + "rxjs": "5.5.2", "ts-helpers": "1.1.2", "ts-loader": "2.0.3", "tslint": "4.5.1", diff --git a/src/modules/infinite-scroll.directive.ts b/src/modules/infinite-scroll.directive.ts index 7bb7f7af..f0d481b6 100644 --- a/src/modules/infinite-scroll.directive.ts +++ b/src/modules/infinite-scroll.directive.ts @@ -26,7 +26,7 @@ export class InfiniteScrollDirective @Input() infiniteScrollDistance: number = 2; @Input() infiniteScrollUpDistance: number = 1.5; - @Input() infiniteScrollThrottle: number = 300; + @Input() infiniteScrollThrottle: number = 150; @Input() infiniteScrollDisabled: boolean = false; @Input() infiniteScrollContainer: any = null; @Input() scrollWindow: boolean = true; diff --git a/tests/services/scroll-register.spec.ts b/tests/services/scroll-register.spec.ts index 5e7abb2c..3fdc6e48 100644 --- a/tests/services/scroll-register.spec.ts +++ b/tests/services/scroll-register.spec.ts @@ -24,22 +24,51 @@ describe('Scroll Regsiter', () => { return { element: mockedElement, container: mockedContainer }; }; - // beforeEach(() => { - - // }); - it('should create a Observable of scroll observable', () => { const mockDom = createMockDom(); const scrollConfig: Models.IScrollRegisterConfig = { container: mockDom.container.nativeElement, throttle: 300, - }; const scroller$: Observable<{}> = ScrollRegister.attachScrollEvent(scrollConfig); const actual = scroller$; expect(actual).toBeDefined(); }); + [ + { + it: 'should create a Observable of scroll observable with default 300 throttle', + config: { + throttle: 300, + }, + expected: 300 + }, + { + it: 'should create a Observable of scroll observable without a sampleTime if throttle is 0', + config: { + throttle: 0 + }, + expected: 0 + } + ].forEach((spec) => { + it(spec.it, (done) => { + const mockDom = createMockDom(); + const scrollConfig: Models.IScrollRegisterConfig = { + container: mockDom.container.nativeElement, + ...spec.config + }; + const scroller$: Observable<{}> = ScrollRegister.attachScrollEvent(scrollConfig); + const start = new Date(); + scroller$.subscribe((result) => { + const end = new Date(); + const actual = end.getTime() - start.getTime(); + expect(actual).toBeGreaterThanOrEqual(spec.expected); + done(); + }); + mockDom.container.nativeElement.dispatchEvent(new Event('scroll')); + }); + }); + it('should create a scroll params object', () => { const lastScrollPosition = 0; const positionStats = {} as Models.IPositionStats;