RxJS 中以前的订阅会发生什么？答案

【问题标题】：What happens to previous Subscriptions in RxJS?RxJS 中以前的订阅会发生什么？
【发布时间】：2017-09-11 19:59:18
【问题描述】：

虽然我很习惯使用 RxJS 和响应式编程，但有一件事情一直困扰着我，我无法理解。

假设我们有一个简单的函数，每次单击按钮 SCAN 时都会运行该函数

function scan() {
   this.startScaning(10).subscribe(scannedItem => console.log(scannedItem))
}

在我们的扫描函数中，我们使用 startScanning 方法开始扫描（即针对蓝牙设备）10 秒，它返回一个我们订阅的可观察对象并记录所有发现的设备/项目。

好的，到目前为止一切都很好，但让我困扰的是如果用户连续点击按钮 10 次会发生什么。以前的订阅会怎样？我应该如何处理这个？我每次都需要退订吗，我需要退订吗？

将不胜感激，并提供可能的进一步阅读/示例，谢谢

【问题讨论】：

标签： javascript rxjs rxjs5 reactive

【解决方案1】：

我处理这个问题的方法是在进程运行时翻转一个布尔值并将按钮的 [disabled] 属性绑定到该值，例如

isScanning: boolean
function scan() {
    this.isScanning = true
    this.startScaning(10).subscribe({
        next: scannedItem => console.log(scannedItem),
        complete: () => this.isScanning = false
    })
}

<button (click)="scan()" [disabled]="isScanning">Click me!</button>

（您可能还想在按钮被禁用时添加某种它正在处理的指示器 - 我喜欢使用 Font Awesome 的 spinner icons 和 *ngIf="isScanning"）

至于其他的，就看startScaning方法具体是怎么实现的了。很可能您有十个单独的可观察对象，每个可观察对象都会在各自单击后十秒自动完成，因此无需担心手动取消订阅或其他任何事情，除非这是一个非常繁重的过程（但 IMO 你仍然应该出于用户体验的原因，无论如何都要禁用该按钮）。

再次查看您的问题，我假设您使用的是 Angular，但您实际上并没有这么说。如果不是，一般原则是一样的，唯一的区别是您需要使用不同的方式设置按钮的disabled 状态。

【讨论】：

我在 Angular 内外使用 Rx，所以不希望问题是特定于 Angular 的，但是是的，你的答案似乎很好，我今天晚些时候会接受，谢谢跨度>

【解决方案2】：

您可以在单击时将函数提交到另一个不执行任何操作的类，当订阅返回结果时调用一个类再次更改按钮以调用此函数

它并没有解决 RxJS 的问题，只是你的问题，只是在等待结果时让按钮无用

我想您也可以使用 observables 将每个调用映射到一个变量，但在您的情况下，在循环运行时阻止函数调用似乎更好

【讨论】：