Angular中多个复选框的去抖功能

Question

I am trying to apply debounce time for multiple check boxes in Angular 7. The idea is to delay the api calls for x seconds in order to have better performing application (checking/unchecking the checkboxes invokes a call to the API).

Each checkbox corresponds to a filter which is sent to the backend when checked/unchecked and that determines the result returned from the server. I have tried using a custom debounce directive suggested in the article mentioned here, https://coryrylan.com/blog/creating-a-custom-debounce-click-directive-in-angular

The problem addresses debounce for a single input field, in my case if I check and uncheck a single checkbox multiple times within the debounce time, only of call to the backend is made no matter how many times I click it. But my problem is with checking/unchecking multiple checkboxes and have only one request made to the API with in the debounce time. Right now a call to the api is made every time I click on the checkbox which does not address my issue.

Following is the directive I am using which is similar to the example in the article:

import { Output, EventEmitter, OnInit, OnDestroy, Directive, ElementRef  } from '@angular/core';
import { debounceTime } from 'rxjs/operators';
import { HostListener } from '@angular/core';
import { Subscription, Subject } from 'rxjs';

@Directive({
  selector: '[appDebounceClick]'
})
export class DebounceDirective implements OnInit, OnDestroy{

  @Output() debounceClick = new EventEmitter();
  private clicks = new Subject();
  private subscription: Subscription;

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    this.subscription = this.clicks.pipe(
      debounceTime(2000)
    ).subscribe(e => this.debounceClick.emit(e));
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  @HostListener('change', ['$event'])
    clickEvent(event) {
    this.clicks.next(event);
  }
}

Following is the code in my template:

<ng-container *ngFor="let checkbox of checkboxList">
  <mat-checkbox *ngIf="checkbox.name == 'test'"  [(ngModel)]="checkbox.selected" appDebounceClick (debounceClick)="onChange($event,checkbox)" >
    {{checkbox.name}}
  </mat-checkbox>
</ng-container>

I feel the issue here is the Directive is applied to every checkbox which in turn creates a new Observable/Subject which only associated with an individual checkbox . I think there should be just one Subject to which the click events on the checkboxes be subscribes to, but I am not entirely sure how to implement that. Would appreciate any thoughts on this issue or any better ideas on solving this problem.

Answer 1

You can use a Service to centralize the Subject , obviously the Service has to be Singleton so that all the checkboxes emits to one Subject and the debounceTime operator acts for all elements.

On the other hand, you can implement the same behavior but in the parent component, I mean, the Subject has to be placed in the parent component.

The decision depends on reusability matters.