RxJS delayWhen example enhanced with clicks queued/completed and delays displayed.

RandomDelayedCountedClicks.ts

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

Output:

>>>[1846: 1/0]: {"msg":"Click 1","delay":4579,"est":6425} >>>
>>>[2039: 2/0]: {"msg":"Click 2","delay":240,"est":2279} >>>
>>>[2229: 3/0]: {"msg":"Click 3","delay":2345,"est":4574} >>>
<<<[2279: 3/1]: {"msg":"Click 2","delay":240,"est":2279} <<<
<<<[4575: 3/2]: {"msg":"Click 3","delay":2345,"est":4574} <<<
<<<[6426: 3/3]: {"msg":"Click 1","delay":4579,"est":6425} <<<
>>>[13821: 4/3]: {"msg":"Click 4","delay":607,"est":14428} >>>
>>>[14029: 5/3]: {"msg":"Click 5","delay":2406,"est":16435} >>>
>>>[14221: 6/3]: {"msg":"Click 6","delay":392,"est":14613} >>>
<<<[14429: 6/4]: {"msg":"Click 4","delay":607,"est":14428} <<<
<<<[14614: 6/5]: {"msg":"Click 6","delay":392,"est":14613} <<<
<<<[16436: 6/6]: {"msg":"Click 5","delay":2406,"est":16435} <<<
>>>[20309: 7/6]: {"msg":"Click 7","delay":3770,"est":24079} >>>
>>>[20653: 8/6]: {"msg":"Click 8","delay":455,"est":21108} >>>
<<<[21109: 8/7]: {"msg":"Click 8","delay":455,"est":21108} <<<
>>>[23597: 9/7]: {"msg":"Click 9","delay":3620,"est":27217} >>>
>>>[23996: 10/7]: {"msg":"Click 10","delay":4832,"est":28828} >>>
<<<[24080: 10/8]: {"msg":"Click 7","delay":3770,"est":24079} <<<
>>>[24541: 11/8]: {"msg":"Click 11","delay":195,"est":24736} >>>
<<<[24737: 11/9]: {"msg":"Click 11","delay":195,"est":24736} <<<
>>>[25053: 12/9]: {"msg":"Click 12","delay":4597,"est":29650} >>>
>>>[25549: 13/9]: {"msg":"Click 13","delay":4279,"est":29828} >>>
>>>[25965: 14/9]: {"msg":"Click 14","delay":2451,"est":28416} >>>
>>>[26437: 15/9]: {"msg":"Click 15","delay":1331,"est":27768} >>>
>>>[26893: 16/9]: {"msg":"Click 16","delay":2970,"est":29863} >>>
<<<[27218: 16/10]: {"msg":"Click 9","delay":3620,"est":27217} <<<
>>>[27381: 17/10]: {"msg":"Click 17","delay":1476,"est":28857} >>>
<<<[27769: 17/11]: {"msg":"Click 15","delay":1331,"est":27768} <<<
>>>[27797: 18/11]: {"msg":"Click 18","delay":1074,"est":28871} >>>
<<<[28417: 18/12]: {"msg":"Click 14","delay":2451,"est":28416} <<<
<<<[28829: 18/13]: {"msg":"Click 10","delay":4832,"est":28828} <<<
<<<[28857: 18/14]: {"msg":"Click 17","delay":1476,"est":28857} <<<
<<<[28872: 18/15]: {"msg":"Click 18","delay":1074,"est":28871} <<<
<<<[29651: 18/16]: {"msg":"Click 12","delay":4597,"est":29650} <<<
<<<[29829: 18/17]: {"msg":"Click 13","delay":4279,"est":29828} <<<
<<<[29864: 18/18]: {"msg":"Click 16","delay":2970,"est":29863} <<<