отдельный поток событий кликов с минимальной задержкой между собой с помощью Rxjs

У меня проблема, когда пользователь очень быстро нажимает две кнопки, которые обновляют в базе данных 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: Сб, 12 мая 2018 г., 17:22:29 GMT-0600 (MDT)

новый буфер: 11,12,13

5: Сб, 12 мая 2018 г., 17:22:30 GMT-0600 (MDT)

2: Сб, 12 мая 2018 г. 17:22:31 GMT-0600 (MDT)

11: Сб, 12 мая 2018 17:22:31 GMT-0600 (MDT)

2 и 11 произошли в одно и то же время. как я могу это решить :(


person user8987378    schedule 12.05.2018    source источник
comment
вы хотите пробежать только 1, 5,11 и две секунды между ними?   -  person Fan Cheung    schedule 13.05.2018
comment
каждый номер является примером запроса, и я хочу выполнить их в их порядке с задержкой в ​​2 секунды между ними.   -  person user8987378    schedule 13.05.2018
comment
Я имею в виду, что хочу, чтобы выполнение было 1,2,3,4,5,6,7,8,9,10,11,12,13 с 2-секундной задержкой между каждым из них.   -  person user8987378    schedule 13.05.2018


Ответы (2)


Как насчет этого, но обычно вы можете заменить функцию таймера на http-вызов, вы не можете точно сказать, сколько времени займет 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()}`));
person Fan Cheung    schedule 14.05.2018
comment
работает как шарм. не могли бы вы объяснить, как это работает. благодаря. - person user8987378; 14.05.2018
comment
срабатывает первый щелчок $ и ждите первого щелчка $ с задержкой в ​​2 секунды, пока он не сработает. - person Fan Cheung; 14.05.2018

Вы можете заархивировать поток событий с потоком с интервалом, чтобы связать каждое излучение с интервалом. Исходные значения будут передаваться с задержкой не менее 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);
person mkulke    schedule 13.05.2018
comment
Это лучше, чем мой код. я изменил код на: var count = 0; const click $ = Rx.Observable.fromEvent ($ ('. btn'), 'click'). share (); const interval $ = Rx.Observable.interval (2000); Rx.Observable.zip (щелкните $, interval $) .map (([value, _index]) = ›{count ++; return count;}) .subscribe ((a) =› {console.log (${a} : ${new Date()})}); но когда я нажимаю несколько раз, я все равно получаю потоки с тем же временем - person user8987378; 13.05.2018
comment
любое решение? - person user8987378; 13.05.2018