CODEWITHSUNDEEP
javascriptrxjs
Brett
Brett

Reputation: 1781

RxJs Infinite scrolling trigger with delay

I would like to trigger a call to get new data when the user has the thumb of the scrollbar at the bottom for over 1sec. I have the trigger working without the delay. Here is the code.

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'));

I would like to have the trigger to get new data only called if the user leaves the thumb for over 1sec at the bottom of the page, and not having it loading new data automatically when it reach the bottom. So there is a notion of delay and of testing that the thumb is still on the bottom. That part I don't know how to implement it as I am a Noob with RxJs. Thanks

Upvotes: 1

Views: 1217

Answers (1)

user3743222
user3743222

Reputation: 18665

Supposing scrolling is the observable which emits values only when the user has the thumb of the scrollbar at the bottom.

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$ should emit values only if the up event happens after the specified delay, which is what you seem to be looking for.

Basically, when the scrolling observable emits one value (i.e. when the user reached bottom), the flatMapoperator generates an observable which generates only ONE value (the scroll data) IFF the next upevent occurs after the 1.000 ms delay. If not, the observable is completed and hence emits no values.

I haven't tested but I suppose this should work. Let me know if that does the trick.

Upvotes: 2

Related Questions