RxJS - 연산자 2

시간을 다루는 연산자들

시간을 다루는 연산자 1

delay : 주어진 시간만큼 지연 발행

const { interval, fromEvent } = rxjs
const { delay, tap, take } = rxjs.operators

interval(1000).pipe(
    take(5),
    tap(x => console.log(x + ' 발행시작')),
    delay(1500)
).subscribe(x => console.log(x + ' 발행완료'))

• 1.5초씩 지연됐다가 차례대로 발행이 완료된다.

timestamp : 타임스탬프

const { fromEvent } = rxjs
const { timestamp, pluck, map } = rxjs.operators

fromEvent(document, 'click').pipe(
    pluck('x'),
    timestamp()
).subscribe(console.log)

// log
{
  timestamp: 1662876662266, // time (현재 시간을 정수로 표현한 값)
  value: 411 // x좌표 값
}

timeinterval : 이전 발행물과의 시간차

const { fromEvent, interval } = rxjs
const { timeInterval, pluck } = rxjs.operators

fromEvent(document, 'click').pipe(
    pluck('x'),
    timeInterval()
).subscribe(console.log)

// log
{
  interval: 4042, //time
  value: 235 // x좌표 값
}
{
  interval: 1434, // 위 값이 발행되고 1.4초뒤에 값이 발행됐다는 의미.
  value: 94
}

timeout : 주어진 시간 내 다음 값 미발행 시 오류

const { fromEvent } = rxjs
const { ajax } = rxjs.ajax
const { timeout, pluck } = rxjs.operators

fromEvent(document, 'click').pipe(
    timeout(3000)
).subscribe(
    _ => console.log('OK'),
    err => console.error(err))

• 3초안에 클릭 이벤트가 발생하지 않으면 에러 발생 ⇒ 에러가 발생하면 더이상 작동하지 않는다.

timeoutWith : 주어진 시간 내 다음 값 미발행 시 다른 Observable 개시

const { fromEvent, interval, of } = rxjs
const { ajax } = rxjs.ajax
const { timeoutWith, pluck, scan } = rxjs.operators

fromEvent(document, 'click').pipe(
    timeoutWith(3000, interval(1000)),
    scan((acc, x) => { return acc + 1 }, 0)
).subscribe(console.log)

• 3초안에 클릭 이벤트가 발생하지 않으면 fromEvent스트림이 아닌 interval스트림을 발행하겠다는 의미이다.
• ajax요청을 할 때 일정 시간이 지나도 값이 안오면 원하는 값을 발행할 때 사용한다.

시간을 다루는 Operator 2

debounceTime, auditTime, sampleTime, throttleTime

기본 설정

const { fromEvent } = rxjs
const { timeInterval, pluck, scan, tap } = rxjs.operators

const clicks$ = fromEvent(document, 'click').pipe(
    timeInterval(),
    pluck('interval'),
    scan((acc, i) => acc + i, 0),
    tap(x => console.log('CLICKED: ' + x))
)

clicks$.subscribe()

debounceTime

const { debounceTime } = rxjs.operators

clicks$.pipe(
    debounceTime(1000)
).subscribe(x => console.log('OUTPUT: -------- ' + x))

• 설정한 시간만큼의 간격을 두고 연속된 값들의 마지막 값만 발행한다.
• 코드 설명
  • 클릭을 계속하다가 1초동안 클릭 이벤트가 발생하지 않으면 기존에 있던 값들은 전부 발행이 막히고 마지막 값만 발행된다.
  • 1초가 되기전에 계속 클릭 이벤트가 발생하면 발행되지 않는다.

auditTime

const { auditTime } = rxjs.operators

clicks$.pipe(
    auditTime(1000)
).subscribe(x => console.log('OUTPUT: -------- ' + x))

• 설정한 시간이 지나면 연속된 값들의 마지막 값이 발행된다.
• 설정한 시간이 지나면 무조건 발행된다.
• 코드 설명
  • 1초가 지나면 무조건 한 번은 발행된다. (마지막 값으로)

sampleTime

const { sampleTime } = rxjs.operators

clicks$.pipe(
    sampleTime(1000),
    timeInterval()
).subscribe(x => console.log('OUTPUT: -------- ' + x.value + ' :' + x.interval))

• 언제 값을 입력하든 특정 시간 간격으로 특정 시간에 가장 인접한 값을 발행한다.

throttleTime

const { throttleTime } = rxjs.operators

// default
clicks$.pipe(
    throttleTime(1000, undefined, { 
    	leading: true, trailing: false 
    })
).subscribe(x => console.log('OUTPUT: -------- ' + x))

clicks$.pipe(
    throttleTime(1000, undefined, { 
    	leading: false, trailing: true 
    })
).subscribe(x => console.log('OUTPUT: -------- ' + x))

clicks$.pipe(
    throttleTime(1000, undefined, { 
    	leading: true, trailing: true 
    })
).subscribe(x => console.log('OUTPUT: -------- ' + x))

• 첫 번째 인자로 시간을 설정, 두 번째 인자로 RxJs의 Scheduler 옵션 설정, 세 번째 인자로 leading, trailing 값을 설정한다.
• leading : true
  • 설정한 시간 각격 사이에 발생한 값들은 막힌다.(발행이 안됨)
  • 1초의 시간 간격마다 클릭 이벤트가 발생하면 값이 발행되는데 그 시간 다음에 발생하는 이벤트들을 발행이 막히다가 1초가 되면 그 시간대에 가장 근접한 마지막 값을 발행한다.
• trailing : true
  • auditTime 가 비슷하게 작동한다.
  • auditTime 과의 차이?
    • 마지막 complete 값을 발행하냐 안하냐차이
    • 발행하면 throttleTime
    • 발행 안 하면 auditTime
• leading : true trailing : true
  • 앞에 값과 뒤에 값이 모두 출력된다.

~Time 이 붙지 않은 연산자들

debounce, audit, sample, throttle

• time이 붙은 연사자들의 기본형으로 커스텀해서 사용할 때 사용된다.

const { fromEvent, interval } = rxjs
const { debounce, audit, pluck } = rxjs.operators

// 클릭한 y 좌표값에 따라 값이 발행되는 시간이 달라진다.
fromEvent(document, 'click').pipe(
	pluck('y'),
	debounce(y => interval(y * 10))
).subscribe(console.log);

fromEvent(document, 'click').pipe(
	pluck('y'),
	audit(y => interval(y * 10))
).subscribe(console.log);

//--------------------------------------------------------------------------------------------
const { BehaviorSubject, fromEvent, interval } = rxjs
const { debounce, tap } = rxjs.operators

const bs = new BehaviorSubject(1000)

fromEvent(document, 'click').pipe(
    tap(_ => console.log(bs.getValue())),
    debounce(e => interval(bs.getValue())),
    tap(_ => bs.next(bs.getValue() + 500))
).subscribe(_ => console.log('CLICK'));

//-------------------------------------------------------------------------------------------
const { fromEvent, interval } = rxjs
const { sample } = rxjs.operators

interval(1000).pipe(
	sample(fromEvent(document, 'click'))
).subscribe(console.log);

//------------------------------------------------------------------------------------------
const { fromEvent, interval } = rxjs
const { throttle, timeInterval, pluck } = rxjs.operators

fromEvent(document, 'click').pipe(
	throttle(e => interval(1000)),
    timeInterval(),
    pluck('interval')
).subscribe(console.log);