如何在 RXJS 中啟動和停止可觀察的間隔？

Question

我有一個非常簡單的 timeInterval observable，我想在不斷開訂閱者的情況下開始/停止傳輸（無論可觀察狀態如何，都應該坐等）。 有沒有可能，如果有怎么辦？

var source = Rx.Observable
  .interval(500)
  .timeInterval()
  .map(function (x) { return x.value + ':' + x.interval; })
  .take(10);

  var subscription = source.subscribe(
  function (x) {
     $("#result").append('Next: ' + x + ' ');
  },
  function (err) {
    $("#result").append('Error: ' + err);
  },
  function () {
    $("#result").append('Completed');
  });

一般評論：我看到的大多數示例都展示了如何定義可觀察對象和訂閱者。 我如何影響現有對象的行為？

Answer 1

取決於停止/恢復信號的來源。 我能想到的最簡單的方法是使用pausable operator ，正如文檔所說，它更適合熱觀察。 因此，在下面的示例代碼中，我刪除了take(10) （您的可暫停信號現在通過pauser主題pauser ），並添加了share以將您的 observable 變成熱門的。

• 關於熱與冷，請查看圖示各自的數據流。
• 在主題上，您還可以查看相應的語義

var pauser = new Rx.Subject(); var source = Rx.Observable .interval(500) .timeInterval() .map(function (x) { return x.value + ':' + x.interval; }) .share() .pausable(pauser); var subscription = source.subscribe( function (x) { $("#result").append('Next: ' + x + ' '); }, function (err) { $("#result").append('Error: ' + err); }, function () { $("#result").append('Completed'); }); // To begin the flow pauser.onNext(true); // or source.resume(); // To pause the flow at any point pauser.onNext(false); // or source.pause();

這是一個更復雜的示例，它將每 10 個項目暫停您的源：

// Helper functions
function emits ( who, who_ ) {return function ( x ) {
 who.innerHTML = [who.innerHTML, who_ + " emits " + JSON.stringify(x)].join("\n");
};}

var pauser = new Rx.Subject();
var source = Rx.Observable
  .interval(500)
  .timeInterval()
  .map(function (x) { return x.value + ':' + x.interval; })
  .share();
var pausableSource = source
  .pausable(pauser);

source
  .scan(function (acc, _){return acc+1}, 0)
  .map(function(counter){return !!(parseInt(counter/10) % 2)})
  .do(emits(ta_validation, 'scan'))
  .subscribe(pauser);

var subscription = pausableSource.subscribe(
  function (x) {
     $("#ta_result").append('Next: ' + x + ' ');
  },
  function (err) {
    $("#ta_result").append('Error: ' + err);
  },
  function () {
    $("#ta_result").append('Completed');
});

您現在應該已經知道第二個問題的答案了。 將給定的 observable 與相關的 RxJS 運算符結合起來，以實現您的用例。 這就是我在這里所做的。

Answer 2

不是最優雅的，但可能是最簡單的：

  timeSubscription: Subscription
  timer: Observable<number>;
  time = 0;

toggle() {
if (!this.timer)
  this.timer = interval(500);

if (!this.timeSubscription || this.timeSubscription.closed)
  this.timeSubscription = this.timer.subscribe(tick => { // running
    console.log(this.time++);
  });
else
  this.timeSubscription.unsubscribe(); // not running 
}