RxJS限制几个输入范围

时间:2016-09-14 08:34:09

标签: javascript rxjs

我有几个范围,我想将所有范围的总和限制为100.使用此代码我可以完成它,但显然Observables卡在那里并且不会再返回任何值。如何实现相同的效果,但允许滑块向右移动,当然不能使用此限制状态?

 let limit = 0;

 function setStream(parent) {
    const mousemove = Rx.Observable.fromEvent(document, 'mousemove');
    const parentBound = parent.getBoundingClientRect();
    const parentLeft = parentBound.left;
    const parentWidth = parentBound.width;
    const percentage = toPercentage(parentWidth);

    return (target) => {
        const mousedown = Rx.Observable.fromEvent(target, 'mousedown');
        const mouseup = Rx.Observable.fromEvent(document, 'mouseup');

        return mousedown
            .flatMap(() => {
                return mousemove
                    .map((e) => {
                        const perct = R.compose(Math.round, percentage)(e.clientX - parentLeft);

                        return {
                            target: target,
                            position: perct
                        };
                    })
                    //block range at 100
                    .filter(state => state.position >= 0 && state.position <= 100 && limit !== 100)
                    .map((state) => {
                        const nState = state;
                        nState.target.style.left = `${nState.position}%`;
                        return nState;
                    })
                    .takeUntil(mouseup);
            });
    };
}


return Rx.Observable.combineLatest(...sliders$)
        .map((state) => {
            limit = state.reduce((prev, curr) => curr.position + prev, 0);
            return state;
        });

谢谢!

0 个答案:

没有答案