角度点击去抖动

Question

在我的模板中，我有一个字段和两个按钮：

<div class="btn-plus" (click)="add(1)"> - </div>
<div class="txt"> {{ myValue }} </div>
<div class="btn-minus" (click)="add(-1)"> + </div>

在我的组件 .ts 文件中，我有：

add(num) {
    this.myValue +=num;
    this.update(); // async function which will send PUT request
}

该this.update()函数myValue在一个大的 JSON 对象中放入适当的字段并将其发送到服务器。

问题：当用户在短时间内点击加号/减号按钮 10 次时，请求将被发送 10 次。但我只想发送一次请求 - 最后一次点击后 0.5 秒。怎么做？

Answer 1

这是我在互联网上找到的部分答案，但我愿意接受更好的解决方案（或改进到以下解决方案（指令））：

在互联网上我发现appDebounceClick指令可以通过以下方式帮助我：

我update从add.ts 文件中删除：

add(num) {
    this.myValue +=num;
}

并按以下方式更改模板：

<div 
    appDebounceClick 
    (debounceClick)="update()" 
    (click)="add(1)" 
    class="btn-plus"
    > - 
</div>
<div class="txt"> {{ myValue }} </div>
<!-- similar for btn-minus -->

奖金

appDebounceClick由Cory Rylan编写的指令（我将代码放在这里，以防链接将来停止工作）：

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

@Directive({
  selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit, OnDestroy {
  @Input() debounceTime = 500;
  @Output() debounceClick = new EventEmitter();
  private clicks = new Subject();
  private subscription: Subscription;

  constructor() { }

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

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

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

Answer 2

使用takeUntil运算符：

export class AppComponent  {
  name = 'Angular';

  calls = new Subject();

  service = {
    getData: () => of({ id: 1 }).pipe(delay(500)),
  };

  click() {
    this.calls.next(true);
    this.service.getData().pipe(
      takeUntil(this.calls),
    ).subscribe(res => console.log(res));
  }
}

Stackblitz（打开控制台查看日志）