observable - 次の値を遅らせる Observable を作成する

Question

写真のようにRxJSを使用してオブザーバブルを作成しようとしています。

• 値を取得し、一定時間待機してから次の値を取得します。
• 次のものは、残りをスキップして、待機期間中に発行された最後の値になります。
• 値が発行されなかった場所で待機間隔が過ぎた場合、画像の最後の例が示すように、次の値をすぐに取得する必要があります。

Answer 1

これは、演算子に変更されたクリストファーのソリューションです。

オペレーターはthrottleImmediate、指定されたセレクターが完了するまで、ソースからの最新の値のみを保存します。各完了の直後に、キャッシュされた値が存在する場合はそれを起動します。セレクターに副作用 (アニメーションなど) がある場合に使用するのが最適です。

var Rx  = require('rx'),
source  = Rx.Observable.interval(10).take(500),
log     = console.log.bind(console);

Rx.Observable.prototype.throttleImmediate = function (selector) {
    var source = this;

    return Rx.Observable.create(function (observer) {

        var delaying = false,
            hasValue = false,
            complete = false,
            value;

        function onNext (x) {
          value = x;
          if (delaying) {
            hasValue = true;
          } else {
            sendValue();
          }
        }

        function sendValue () {
          delaying = true;
          selector(value).subscribe(
            observer.onNext.bind(observer),
            observer.onError.bind(observer),
            function(){
              if (hasValue) {
                hasValue = false;
                sendValue();
              } else {
                delaying = false;
              }
            }
          );
        }

        return source.subscribe(
            onNext,
            observer.onError.bind(observer),
            function () {
              if (hasValue) {
                complete = true;
              } else {
                observer.onCompleted();
              }
            }
          );
      });
};

source
  .throttleImmediate(function(data){
    var delay;

    if(data%2==0)
      delay=500;
    else
      delay=1000;

    return Rx.Observable.timer(delay).map(function(){ return data; });
  })
  .subscribe(log)

これは、遅延する値がセレクターだけが知っているソースにバックプレッシャーをかけているときに便利です。

例: 質問のマーブル ダイアグラムが与えられた場合。

ajaxPages最初のソースが、ナビゲーション バーのクリックから発生した、表示する html データを含む ajax 呼び出しであるとします。animatePageそして、持続時間が動的なエントリ アニメーション とともにそれらをレンダリングします。

ajaxPages.throttleImmediate(animatePage).subscribe();

ここでは、ソースからの値を使用してページをアニメーション化し、アニメーション期間中に発行された最新の値を除くすべての値をスキップします。

実際には、取得したのは、他のクリックがすぐ後に続くクリックを無視するストリームであり、ユーザーに表示しても意味がありません。