RxJs 无限滚动触发器延迟

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 的菜鸟。谢谢

Answer 1

假设 scrolling 是仅当用户将滚动条放在底部时才发出值的可观察对象。

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 发出一个值时（即当用户到达底部时），flatMapoperator 生成一个仅生成一个值（滚动数据）的 observable IFF 下一个 up事件在 1.000 毫秒延迟后发生。如果没有，则可观察对象已完成，因此不会发出任何值。

我还没有测试过，但我想这应该行得通。让我知道这是否有效。

RxJs 无限滚动触发器延迟

RxJs Infinite scrolling trigger with delay

javascript

rxjs