Question

我正在尝试使用RxJS来创建一个可观察的图像。

Expected observable mapping

获取一个值并在获得之前等待一段固定的时间下一个。
下一个将是期间发出的最后一个值等等，跳过其余的。
如果等待时间间隔没有发出值，则下一个值应该立即抓住作为图像的最后一个例子描绘。

Answer 1

这应该可以解决问题。

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

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 () {
      observer.onNext(value);
      if (complete) {
        observer.onCompleted();
      } else {
        setTimeout(callback, 1000); // exercise for the reader. Use a scheduler.
      }
      delaying = true;
    }

    function callback () {
      if (hasValue) {
        hasValue = false;
        sendValue();
      } else {
        delaying = false;
      }
    }

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

Answer 2

以下是克里斯托弗的解决方案被修改为运营商。

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)

这在后退压力源时非常方便，其中延迟值仅由选择器知道。

示例：给出问题的大理石图。

我们假设第一个来源是带有html数据的ajax调用，ajaxPages来自导航栏上的点击。我们希望将它们与条目动画animatePage一起渲染，其持续时间是动态的。

ajaxPages.throttleImmediate(animatePage).subscribe();

在这里，我们使用源中的值为页面设置动画，跳过除最新动画之外的动画期间发出的所有值。

在实践中，我们得到的是一个流，它会忽略其他点击后不久发生的点击，并且无法向用户显示，因为它们会动画显示，并立即动画显示。

创建一个延迟下一个值的Observable

2 个答案: