separate stream of click events by minimum delay between each other with Rxjs

Question

i have an issue when user click very fast on two buttons that update in firebase database same object and the same property. the issue that only one of the request save and the rest override. its happen in case user clicked on both button on the same second.

my question is if there a way to execute the click streams with minimum delay between them. i want that there will be minimum of 2 seconds between every execution. thanks for the help.

I want to record all clicks but execute the functionality with minimum delay between.

(function($){ 
    $(function($, undefined){
       var count = 0;
        const click$ = Rx.Observable.fromEvent($('.btn'), 'click').share();

        click$
            .map((ev)=> {
                count ++;
                return count;
            })
            .bufferTime(1000)
            .filter(buffer => buffer.length > 0)
             
            .do((buffer) => console.log(`new buffer: ${buffer}`))
            .map((buffer)=> {
              return  Rx.Observable.fromArray(buffer).concatMap(streams => Rx.Observable.of(streams).delay(2000))
            })
            .flatMap((s)=> s)
            .subscribe((a)=> {
                console.log(`${a} : ${new Date()}`)
            });
    });

})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button class="btn">Click</button>
</body>
</html>

the issue is when i click multiple times more than second. streams from different buffer will execute on the same time. how i can solve it :( example:

new buffer: 1,2,3,4

new buffer: 5,6,7,8,9,10

1 : Sat May 12 2018 17:22:29 GMT-0600 (MDT)

new buffer: 11,12,13

5 : Sat May 12 2018 17:22:30 GMT-0600 (MDT)

2 : Sat May 12 2018 17:22:31 GMT-0600 (MDT)

11 : Sat May 12 2018 17:22:31 GMT-0600 (MDT)

2 and 11 happened on the same time. how i can solve it :(

every number is example of request and i want execute them in their order with delay of 2 seconds between them. — user8987378, May 13 '18 at 06:39
i mean i want the execution to be 1,2,3,4,5,6,7,8,9,10,11,12,13 with 2 second delay between each one. — user8987378, May 13 '18 at 06:41

score 1 · Accepted Answer · answered May 14 '18 at 02:41

1

How about this one, but normally you can replace the timer function with http call, you cannot really sure about how long the http call will take.

const click$ = Rx.Observable.fromEvent(btn, 'click')

click$.concatMap(e=>click$.concatMap(e=>Rx.Observable.timer(2000)))
.subscribe(a=> console.log(`${a} : ${new Date()}`));

answered May 14 '18 at 02:41

Fan Cheung

10,745
3
17
39

works like a charm. can you explain please how it work. thanks. – user8987378 May 14 '18 at 03:28
first click$ fires and wait for the first click$ with 2 seconds delay until it can fire. – Fan Cheung May 14 '18 at 03:35

score 0 · Answer 2 · answered May 13 '18 at 10:58

0

You can zip the event stream with an interval stream to couple every emission with an interval. The source values will be emitted with at least 2s delay between the emissions:

const source$ = Rx.Observable.from([1,2,3,4]);
const interval$ = Rx.Observable.interval(2000);
Rx.Observable.zip(source$, interval$)
  .map(([value, _index]) => value)
  .subscribe(console.log);

answered May 13 '18 at 10:58

mkulke

496
3
5

Its better than my code. i changed the code to : var count = 0; const click$ = Rx.Observable.fromEvent($('.btn'), 'click').share(); const interval$ = Rx.Observable.interval(2000); Rx.Observable.zip(click$, interval$) .map(([value, _index]) => { count++; return count; }) .subscribe((a)=> { console.log(`${a} : ${new Date()}`) }); but when i click multiple time i still getting streams with the same time – user8987378 May 13 '18 at 11:46
anyone solution ? – user8987378 May 13 '18 at 19:15

separate stream of click events by minimum delay between each other with Rxjs

2 Answers2