import { fromEvent, interval } from 'rxjs';
import { delayWhen, map, tap, scan, debounce } from 'rxjs/operators';

let queued: number = 0;
let completed: number = 0;
const start = Date.now();

const clicks = fromEvent(document, 'click');

function tf(): number { return Date.now() - start };

const clickMsgs = clicks.pipe(
   debounce(() => interval(100)),
   scan(x => { queued = x + 1; return queued} , 0),
   map(x => { return { msg: `Click ${x}`, delay: Math.floor(Math.random() * 5000) } } )
   );

const delayedClicks = clickMsgs.pipe(
  map(x => { x['est'] = tf() + x.delay; return x}),
  tap(x => console.log(`>>>[${tf()}: ${queued}/${completed}]: ${JSON.stringify(x)} >>>`)),
  delayWhen(x => interval(x.delay))
  );

delayedClicks.subscribe(x => {
  completed++;
  console.log(`<<<[${tf()}: ${queued}/${completed}]: ${JSON.stringify(x)} <<<`)
  });