Question

我正在React中构建一个轮播组件，我希望耗材函数（例如advanceSlide，rewindSlide等）返回RxJS Observable，它们很容易被链接，合并，与其他可观察对象一样。

现在，我的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返回的observable在重复时使用相同的计算（因为函数用.advance()调用一次，并且只重复了observable。

我需要的是一种方法来返回一个再次运行动画计算的observable，然后每次重复时返回一个新的observable。

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

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

在第一次调用时，计算位置和诸如此类的东西，返回动画observable，它会运行，并且所有内容都会正确动画。在第二次调用时，信号以相同的值重复，因此对用户而言，似乎没有任何反应，因为advance函数尚未被重新调用。

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

Answer 1

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)
}

这是未经测试的，所以请告诉我它是否确实有用，请关注可能的语法错误。

重新调用返回Rxjs observable的函数

1 个答案: