angular 防抖指令

在 Angular 中，可以通过创建一个防抖指令来实现防抖功能。防抖是一种将多次连续触发的事件合并为一次触发的技术，可以有效地减少请求的次数，提升性能。

下面是一个示例的 Angular 防抖指令：

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

@Directive({
  selector: '[appDebounce]'
})
export class DebounceDirective implements OnInit, OnDestroy {
  @Input() debounceTime = 500; // 默认的防抖时间为 500ms
  @Output() appDebounce = new EventEmitter();

  private destroy$ = new Subject();

  constructor() {}

  ngOnInit(): void {
    this.appDebounce
      .pipe(
        debounceTime(this.debounceTime),
        takeUntil(this.destroy$)
      )
      .subscribe(() => {
        this.appDebounce.emit();
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

使用时，将该指令应用到需要防抖的元素上，并通过 `appDebounce` 属性绑定一个函数，当防抖时间内没有新的触发时，该函数会被调用。

<button (click)="onClick()" appDebounce (appDebounce)="onDebouncedClick()">Click me</button>

以上代码中，每次点击按钮时会触发 `onClick` 方法，但只有在 500ms 内没有新的点击时，才会触发 `onDebouncedClick` 方法。