时间戳

首页 > 解决方案 > 角度点击去抖动

angular - 角度点击去抖动

问题描述

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

<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 秒。怎么做？

标签： angulartypescriptrxjsdebounce

解决方案

使用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（打开控制台查看日志）

推荐阅读