debounceTime vs throttleTime vs auditTime vs sampleTime

You can also try dedicated playgrounds for: auditTime, throttleTime, debounceTime, sampleTime

Check out "Debounce vs Throttle vs Audit vs Sample — Difference You Should Know" article for a detailed review

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
const { rxObserver, palette } = require('api/v0.3');
const { merge, timer, from } = require('rxjs');
const { map, zip, takeUntil, auditTime, throttleTime, debounceTime, sampleTime } = require('rxjs/operators');

// endless stream for coloring
const palette$ = from(palette);

// generate a colorized marble stream
const source$ = merge(timer(0, 330), timer(50, 180)).pipe(
    zip(palette$, Marble),
    map(setCurrentTime),
    takeUntil(timer(1000))
  );

source$
  .subscribe(rxObserver('source'));

source$.pipe(
    debounceTime(100),
    map(setCurrentTime)
  )
  .subscribe(rxObserver('debounceTime(100)'));

source$.pipe(
    throttleTime(100, undefined, { leading: true }),
    map(setCurrentTime)
  )
  .subscribe(rxObserver('throttleTime(100) -- leading'));

source$.pipe(
    throttleTime(100, undefined, { trailing: true }),
    map(setCurrentTime)
  )
  .subscribe(rxObserver('throttleTime(100) -- trailing'));

source$.pipe(
    auditTime(100),
    map(setCurrentTime)
  )
  .subscribe(rxObserver('auditTime(100)'));

source$.pipe(
    sampleTime(100),
    map(setCurrentTime)
  )
  .subscribe(rxObserver('sampleTime(100)'));


// helpers
// keeps colors, updated value to Date.now
function setCurrentTime({ color }){
  return Marble(Date.now(), color);
}

// creates a colored Marble
function Marble(value, color) {
  return {
    valueOf: ()=>value
    , color
  };
}
⚠️ Execution time is limited to 1000ms