时间戳

首页 > 解决方案 > Rxjs - 带有按钮的表格，在请求之前按下最后一个按钮后等待一段时间

angular - Rxjs - 带有按钮的表格，在请求之前按下最后一个按钮后等待一段时间

问题描述

我希望您能帮我解决一些我想到的用于删除通知之类的事情。

基本上，我的用户有一个通知列表，他们可以将其标记为已读。
现在，我的后端非常缓慢（我无法控制它）。
现在，当用户点击通知的✉按钮时：

  1. 向后端发出请求标记通知，然后在后端响应后，用另一个请求刷新数据；
  2. 入口在app内存中被修改，视图被修改
  3. 1.刷新的数据回来了，修改了视图

这相当于这样的事情（使用 Angular 的HttpClient）：

markAsRead(id: string): void {
  this.http.post(url, body, options)
  .subscribe(() => this.reloadNotifications());

  this.markAsReadInternal(id);
}

麻烦来了：当我的用户决定做一个动作时，一切都很好。但是当用户决定阅读许多通知时，视图可以随着数据刷新而多次更改。

我可以看到一种防止问题的方法，但这意味着

  1. 按钮被点击；
  2. 将id存储在数组中；
  3. 等待 X 毫秒再点击一次；
  4. 如果点击返回到2.，否则
  5. 发送带有 id 数组的请求并刷新数据

将其翻译成 rxjs 代码有什么帮助吗？

奖励点：无论如何，我的数据每 5 秒刷新一次......

标签： angularrxjsrxjs6

解决方案

按钮点击调用一个函数：

<button (click)="buttonClicked()"></button>

将按钮点击存储为主题/可观察的：

private buttonClick$: Subject<any> = new Subject();

为每次点击发出一个新值：

buttonClicked() {
  this.buttonClick$.next();
  // this.buttonClick$.emit(); // One of these is deprecated, can't remember which
}

限制按钮点击：

getButtonClicks() {
  return this.buttonClick$.pipe(
    throttleTime(5000)
  )
}

然后您可以执行以下操作：

getButtonClicks().subscribe(() => {
  // Do something with throttled button clicks
});

要从点击中观察到，您也可以使用它而不是主题： https ://www.learnrxjs.io/operators/creation/fromevent.html

编辑：

因此，您希望在节流之间节省点击次数。你可以这样做：

getButtonClicks() {
  return this.buttonClick$.pipe(
    buffer(this.buttonClick$.pipe(
      debounceTime(5000)
    ))
  )
}

然后你仍然调用你的 BE API：

getButtonClicks().subscribe((clicks) => {
  // Do something with debounced clicks
  // console.log(clicks);
});

推荐阅读