使用 Rxjs 通过彼此之间的最小延迟来分离点击事件流

Question

当用户非常快速地点击两个在 firebase 数据库中更新相同对象和相同属性的按钮时，我遇到了一个问题。只有一个请求保存而其余请求覆盖的问题。它发生在用户同时点击两个按钮的情况下。

我的问题是是否有一种方法可以以最小延迟执行点击流。我希望每次执行之间至少间隔 2 秒。感谢您的帮助。

我想记录所有点击，但以最小延迟执行功能。

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

问题是我点击了多次超过一秒。来自不同缓冲区的流将同时执行。我该如何解决:( 示例：

新缓冲区：1,2,3,4

新缓冲区：5,6,7,8,9,10

1：2018 年 5 月 12 日星期六 17:22:29 GMT-0600（MDT）

新缓冲区：11,12,13

5：2018 年 5 月 12 日星期六 17:22:30 GMT-0600（MDT）

2：2018 年 5 月 12 日星期六 17:22:31 GMT-0600（MDT）

11：2018 年 5 月 12 日，星期六 17:22:31 GMT-0600（MDT）

2和11同时发生。我该如何解决:(

Answer 1

您可以使用间隔流压缩事件流，以将每个发射与间隔相结合。源值将以至少 2 秒的延迟发射：

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

Answer 2

这个怎么样，不过一般你可以用http调用代替timer函数，你不能确定http调用需要多长时间。

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

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

使用 Rxjs 通过彼此之间的最小延迟来分离点击事件流

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

firebase-realtime-database

rxjs

rxjs5

data-stream

rxjs-dom