javascript - 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 时发出值事件在指定的延迟之后发生，这似乎是您正在寻找的。

基本上，当滚动的可观察对象发出一个值时(即当用户到达底部时)，flatMap运算符生成一个仅生成一个值(滚动数据)的可观察对象 IFF 下一个 up事件在 1.000 毫秒延迟后发生。否则，可观察对象完成，因此不发出任何值。

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