我正在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
但是，很明显，从中返回的observableadvance在重复时使用相同的计算（因为该函数.advance()仅用一次调用，并且只重复了observable）。
我需要的是一种返回可观察对象的方法，该方法可再次运行动画计算，然后在每次重复时返回一个新的可观察对象。
为了更好地说明我想要实现的目标：
carousel.advance().repeat(1).subscribe();
第一次调用时，将计算位置和其他内容，然后返回可观察的动画，它会运行，并且一切都会正确进行动画处理。在第二次调用时，以相同的值重复信号，因此对于用户来说，似乎好像什么也没有发生，因为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)
}
这未经测试，所以让我知道它是否确实有效，请注意可能的语法错误。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句