시간 기반의 operator 비교

RxJS는 다양한 시간 기반의 연산자를 제공하지만, 이 다양성은 적절한 연산자를 선택하기 위한 시간적 비용을 발생시키기도 합니다. 다음은 자주 사용되는 시간 기반 연산자를 시각적으로 비교한 것입니다.

비교한 연산자들:

• auditTime

• bufferTime

• debounceTime

• sampleTime

• throttleTime

(Stackblitz)

/*
interval      ^0-------1-------2-------3-------4-------5-------6-------7-------8-------9------|
auditTime     ^------------------------3-------------------------------7----------------------|
bufferTime    ^----------------[0,1]-------------------[2,3,4]-----------------[5,6,7]-[8,9]--|
debounceTime  ^------------------------------------------------------------------------9------|
sampleTime    ^----------------1-----------------------4-----------------------7--------------|
throttleTime  ^0-------------------------------4-------------------------------8--------------|
*/

// RxJS v6+
import { interval, merge } from 'rxjs';
import { auditTime, bufferTime, debounceTime, sampleTime, throttleTime, tap, take } from 'rxjs/operators';

const takeValue = 10;
const intrvl = 1000;
const time = 3000;

const intervaled = (operator, operatorName) =>
  interval(intrvl)
    .pipe(
      take(takeValue),
      operator,
      tap(x => console.log(`${operatorName}:${x}`))
    );

merge(
  interval(intrvl).pipe(take(takeValue), tap(v => console.log(`i: ${v}`))),
  intervaled(auditTime(time), "auditTime"),
  intervaled(bufferTime(time), "bufferTime"),
  intervaled(debounceTime(time), "debounceTime"),
  intervaled(sampleTime(time), "sampleTime"),
  intervaled(throttleTime(time), "throttleTime")
).subscribe();

// output
/*
i: 0
throttleTime:0
i: 1
i: 2
bufferTime:0,1
sampleTime:1
i: 3
auditTime:3
i: 4
throttleTime:4
i: 5
bufferTime:2,3,4
sampleTime:4
i: 6
i: 7
auditTime:7
i: 8
bufferTime:5,6,7
sampleTime:7
throttleTime:8
i: 9
bufferTime:8,9
debounceTime:9

*/