Question

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

假设我们有一个简单的函数，每次单击按钮SCAN

时都会运行

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

在我们的扫描功能中，我们使用startScanning方法开始扫描（即蓝牙设备）10秒钟，然后返回我们订阅的可观察对象，并记录所有已发现的设备/项目。

好的，到目前为止一直很好，但是如果用户连续10次点击按钮会发生什么困扰我。以前的订阅会发生什么？我该如何应对呢？我是否需要每次取消订阅，是否需要取消订阅？

一个很好的解释将被赞赏，可能的进一步阅读/例子，谢谢

Answer 1

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

它不能解决RxJS问题只是你的问题，只是在等待结果时使按钮无用

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

Answer 2

我处理这个问题的方法是在进程运行时翻转一个布尔值并将按钮的[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方法的实现方式。最有可能的是你有十个单独的可观察对象，每个可观察对象在相应的点击后会自动完成10秒，所以除非是一个非常繁重的过程，否则不需要担心手动取消订阅或其他任何东西（但IMO你仍然应该出于UX原因，无论如何都要禁用该按钮。

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

RxJS中之前的订阅会发生什么？

2 个答案: