重新调用 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)
}
这是未经测试的,如果它确实有效,请告诉我,请留意可能的语法错误。
我正在 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)
}
这是未经测试的,如果它确实有效,请告诉我,请留意可能的语法错误。