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

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

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 :(

Solution

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()}`));