Question

当用户在底部使用滚动条的拇指超过1秒时，我想触发调用以获取新数据。我的触发器没有延迟工作。这是代码。

var scrolling = Rx.Observable.
        fromEvent($('.infinite')[0], 'scroll').
        map((se)=> {
            return {
                scrollTop:se.target.scrollTop,
                scrollHeight: se.target.scrollHeight,
                clientHeight: se.target.clientHeight
            };
        }).
        filter((x)=> x.clientHeight ===  x.scrollHeight - x.scrollTop);


    scrolling.subscribe(
            x => {
                this.$http.get('/data').
                    then((res)=>{
                        _this.infiniteData.push(...res.data);
                    });
        },
            e => console.log('err', e),
            _ => console.log('onCompleted'));

如果用户在页面底部离开拇指超过1秒，并且当它到达底部时没有自动加载新数据，我希望触发器仅获取新数据。所以有一个延迟和测试的概念，拇指仍然在底部。那部分我不知道如何实现它，因为我是一个带RxJs的Noob。感谢

Answer 1

假设scrolling是observable，只有当用户在底部有一个滚动条的拇指时才会发出值。

mouseup$ = Rx.Observable.fromEvent($('.infinite')[0], 'mouseup');
// mouseup or keyup or touchend or else

var getNewData$ = scrolling
    .flatMap(function (scroll_data) {
        return Rx.Observable
            .just(scroll_data)
            .delay(1000)
            .takeUntil(mouseup$);
    });

仅当getNewData$事件发生在指定的延迟之后，

up才会发出值，这正是您所寻找的。

基本上，当滚动observable发出一个值时（即当用户到达底部时），flatMap运算符生成一个observable，它只生成一个值（滚动数据）IFF下一个up事件在1.000 ms延迟后发生。如果没有，则观察结果已完成，因此不会发出任何值。

我还没有测试过，但我认为这应该可行。如果可以，请告诉我。

RxJs无限滚动触发器有延迟

1 个答案: