From 35d12b188a5b1850e66d933afe972688a99f2075 Mon Sep 17 00:00:00 2001 From: Aroooba Date: Fri, 3 Feb 2023 08:37:55 +0900 Subject: [PATCH 1/3] Clear animation frame requests when component destroys --- .../src/lib/components/body/scroller.component.ts | 4 +++- .../ngx-datatable/src/lib/components/datatable.component.ts | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/projects/swimlane/ngx-datatable/src/lib/components/body/scroller.component.ts b/projects/swimlane/ngx-datatable/src/lib/components/body/scroller.component.ts index 73d2584c5..328bcce1a 100644 --- a/projects/swimlane/ngx-datatable/src/lib/components/body/scroller.component.ts +++ b/projects/swimlane/ngx-datatable/src/lib/components/body/scroller.component.ts @@ -23,6 +23,7 @@ import { MouseEvent } from '../../events'; changeDetection: ChangeDetectionStrategy.OnPush }) export class ScrollerComponent implements OnInit, OnDestroy { + static _requestID: any; @Input() scrollbarV: boolean = false; @Input() scrollbarH: boolean = false; @@ -65,6 +66,7 @@ export class ScrollerComponent implements OnInit, OnDestroy { this.parentElement.removeEventListener('scroll', this._scrollEventListener); this._scrollEventListener = null; } + cancelAnimationFrame(ScrollerComponent._requestID); } setOffset(offsetY: number): void { @@ -75,7 +77,7 @@ export class ScrollerComponent implements OnInit, OnDestroy { onScrolled(event: MouseEvent): void { const dom: Element = event.currentTarget; - requestAnimationFrame(() => { + ScrollerComponent._requestID = requestAnimationFrame(() => { this.scrollYPos = dom.scrollTop; this.scrollXPos = dom.scrollLeft; this.updateOffset(); diff --git a/projects/swimlane/ngx-datatable/src/lib/components/datatable.component.ts b/projects/swimlane/ngx-datatable/src/lib/components/datatable.component.ts index 3cb20bed6..b88c1def4 100644 --- a/projects/swimlane/ngx-datatable/src/lib/components/datatable.component.ts +++ b/projects/swimlane/ngx-datatable/src/lib/components/datatable.component.ts @@ -57,6 +57,7 @@ import { sortRows } from '../utils/sort'; } }) export class DatatableComponent implements OnInit, DoCheck, AfterViewInit { + static _requestID: any; /** * Template for the target marker of drag target columns. */ @@ -681,7 +682,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit { return; } - requestAnimationFrame(() => { + DatatableComponent._requestID = requestAnimationFrame(() => { this.recalculate(); // emit page for virtual server-side kickoff @@ -1135,6 +1136,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit { ngOnDestroy() { this._subscriptions.forEach(subscription => subscription.unsubscribe()); + cancelAnimationFrame(DatatableComponent._requestID); } /** From 53199b91c255deb2b12295d3970a3674c6f31dd4 Mon Sep 17 00:00:00 2001 From: Aroooba Date: Fri, 3 Feb 2023 08:38:19 +0900 Subject: [PATCH 2/3] Clear timeout events when component destroys --- .../src/lib/components/body/body.component.ts | 4 +++- src/app/basic/live.component.ts | 12 +++++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/projects/swimlane/ngx-datatable/src/lib/components/body/body.component.ts b/projects/swimlane/ngx-datatable/src/lib/components/body/body.component.ts index 716a93f88..9368d9c52 100644 --- a/projects/swimlane/ngx-datatable/src/lib/components/body/body.component.ts +++ b/projects/swimlane/ngx-datatable/src/lib/components/body/body.component.ts @@ -122,6 +122,7 @@ import { translateXY } from '../../utils/translate'; } }) export class DataTableBodyComponent implements OnInit, OnDestroy { + static _timeOutID: any; @Input() scrollbarV: boolean; @Input() scrollbarH: boolean; @Input() loadingIndicator: boolean; @@ -327,6 +328,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy { if (this.rowDetail || this.groupHeader) { this.listener.unsubscribe(); } + clearTimeout(DataTableBodyComponent._timeOutID); } /** @@ -576,7 +578,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy { * Hides the loading indicator */ hideIndicator(): void { - setTimeout(() => (this.loadingIndicator = false), 500); + DataTableBodyComponent._timeOutID = setTimeout(() => (this.loadingIndicator = false), 500); } /** diff --git a/src/app/basic/live.component.ts b/src/app/basic/live.component.ts index abd90c463..69b1b20cf 100644 --- a/src/app/basic/live.component.ts +++ b/src/app/basic/live.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { Component, ViewChild, ChangeDetectorRef, OnDestroy, HostListener } from '@angular/core'; import { ColumnMode } from 'projects/swimlane/ngx-datatable/src/public-api'; @Component({ @@ -40,7 +40,8 @@ import { ColumnMode } from 'projects/swimlane/ngx-datatable/src/public-api'; ` }) -export class LiveDataComponent { +export class LiveDataComponent implements OnDestroy { + static _timeOutID: any; @ViewChild('mydatatable') mydatatable: any; count = 50; @@ -73,7 +74,7 @@ export class LiveDataComponent { return; } - setTimeout(this.updateRandom.bind(this), 50); + LiveDataComponent._timeOutID = setTimeout(this.updateRandom.bind(this), 50); } stop(): void { @@ -118,4 +119,9 @@ export class LiveDataComponent { req.send(); } + + @HostListener('unloaded') + public ngOnDestroy(): void { + clearTimeout(LiveDataComponent._timeOutID); + } } From 6184c9a78289d98f48e9f59724ba21a4c9facdeb Mon Sep 17 00:00:00 2001 From: Aroooba Date: Fri, 3 Feb 2023 08:39:40 +0900 Subject: [PATCH 3/3] Clear querylist in orderable directive destructor --- .../ngx-datatable/src/lib/directives/orderable.directive.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/swimlane/ngx-datatable/src/lib/directives/orderable.directive.ts b/projects/swimlane/ngx-datatable/src/lib/directives/orderable.directive.ts index c714bddf9..eda352cc1 100644 --- a/projects/swimlane/ngx-datatable/src/lib/directives/orderable.directive.ts +++ b/projects/swimlane/ngx-datatable/src/lib/directives/orderable.directive.ts @@ -40,6 +40,7 @@ export class OrderableDirective implements AfterContentInit, OnDestroy { d.dragging.unsubscribe(); d.dragEnd.unsubscribe(); }); + this.draggables?.destroy(); } updateSubscriptions(): void {