RxJSの以前のサブスクリプションはどうなりますか？

Question

私はRxJSとリアクティブプログラミングを使用するのにかなり慣れていますが、頭がおかしくなるということは私を悩ませていることがあります。

のためのいくつかのいずれかが私たちのスキャン機能の中にボタンSCAN

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

をクリックするたびに実行されるシンプルな機能を持っている我々は、我々は（BluetoothデバイスのためにIE）スキャンを開始startScanningメソッドを使用するとしましょう10秒後に、私たちが購読している観測可能なものが返され、発見されたすべてのデバイス/アイテムが記録されます。

これまでのところ、とても良いですが、ユーザーがボタンを10回連続してクリックするとどうなりますか。前のサブスクリプションはどうなりますか？そして、私はこれをどのように扱うべきでしょうか？毎回退会する必要がありますか？退会する必要がありますか？

素敵な説明は、クリックした上で関数が何もしない別のクラスに提出変えることができるおかげで

Answer 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> 

（あなたもボタンが無効になっている間、それは処理だと指標のいくつかの並べ替えを追加することをお勧めします - 私はそのためにフォント恐ろしいのspinner icons*ngIf="isScanning"とを使用したい）

残りについては、それが依存どのように正確にstartScaningメソッドが実装されているか。ほとんどの場合、それぞれのクリックから10秒後に自動的に完了する10個の観測オブザーバがあるので、手動でサブスクライブしないように心配する必要はありません。 UXの理由でボタンを無効にしてください）。

あなたの質問をもう一度見て、私はあなたが角度を使用していると仮定しましたが、あなたは実際にそれを言っていませんでした。そうでない場合は、一般的な原則は同じですが、唯一の違いはボタンのdisabled状態を設定する別の方法を使用する必要があることです。

Answer 2

、可能性はさらに測定値/例で、感謝、そしてサブスクライブクラスの結果のコールを返すことになります結果

に待っている間それはちょうどあなたの問題をRxJS問題を解決していません

この機能を呼び出すために、再度ボタンを変更するには、ちょうど私があなたにもそれぞれの呼び出しをマップするために観測を使用することができたと役に立たないボタンを作ります変数には、しかし、あなたの場合は、より良い機能をブロックするようですループが実行中に呼び出す