重新调用 returns Rxjs 可观察的函数

Re-invoke function that returns Rxjs observable

我正在 React 中构建一个旋转木马组件,我想要 return RxJS Observable 的可使用函数(如 advanceSlide、rewindSlide 等),它们很容易链接、合并,与其他可观察对象无关。

就目前而言,我的 advance 函数如下所示:

advance = (toIndex = this.state.focusedIndex + 1, animated = true) => {
    const destinationIndex = Math.max(0, Math.min(toIndex, this.props.children.length));
    const itemPosition = this._positions[destinationIndex];
    const domNode = $(ReactDOM.findDOMNode(this.refs.track));
    const animate = Rx.Observable.fromCallback(domNode.animate.bind(domNode));
    this.setState({ focusedIndex: destinationIndex });
    return animate({
      top: '-' + itemPosition.top + 'px'
    }, animated ? this.props.speed : 0);
};

理想情况下我想这样调用这个函数:

this.refs.carousel.advance().delay().repeat(); //achieve infinite carousel

然而,很明显,来自 advance 的可观察对象 return 在重复时使用相同的计算(因为使用 .advance() 调用一次函数并且仅重复可观察对象.

我需要的是一种方法来 return 一个再次运行动画计算的可观察对象,然后每次重复时 return 一个新的可观察对象。

为了更好地说明我想要实现的目标:

 carousel.advance().repeat(1).subscribe();

在第一次调用时,计算位置和诸如此类的东西,returned 动画可观察的,它运行,并且一切都正确地动画。 在第二次调用时,信号以相同的值重复,因此对于用户来说,似乎没有任何反应,因为 advance 函数没有被重新调用。

如何使用 RxJS 实现该功能?我一直在研究使用 Rx.Observable.spawn,但它似乎不是我需要的。

advance 函数确实没有被重新调用,但是它输出的可观察对象被重新订阅了。

另请注意,如果您想重复一次,则应使用 repeat(2)(我知道这听起来很奇怪)。

如果你想重复advance为什么不把它放在可观察链中呢?例如:

var Xms = 1000; // 1s
advanceRepeated = (context) => {
  return Rx.Observable.just(context)
                      .flatMap ((context) => {
                                 return context.refs.carousel.advance().delay(Xms); 
                               })
                      .repeat(2)
}

这是未经测试的,如果它确实有效,请告诉我,请留意可能的语法错误。