09RxJS工具类操作符

tap

类似console.log,会返回源Observalbe的值

const click = fromEvent(document, 'click')
const positions = click.pipe(
  tap(ev => console.log('tap', ev)),
  map((ev: MouseEvent) => ev.clientX)
)
positions.subscribe(x => console.log(x))

delay

把源Observable推送的值，延迟一定时间推送，可以指定timeout，也可以指定未来具体的某个Date

// 每次点击都延迟1S触发事件
const clicks = fromEvent(document, 'click')
const delayedClicks = clicks.pipe(delay(1000))
delayedClicks.subscribe(x => console.log(x))

• 指定未来的某个Date

const clicks = fromEvent(document, 'click')
const date = new Date('March 15,2050 12:00:00')
console.log(date)
const delayedClicks = clicks.pipe(delay(date))
delayedClicks.subscribe(x => console.log(x))

delayWhen

把源Observable推送的值，都延时一定时间推送，与delay不同的是，每次延时的时间都可以不同

const clicks = fromEvent(document, 'click')
const delayedClicks = clicks.pipe(
  // 每次点击都延迟2秒，相当于delay(2000)
  // delayWhen(event => interval(2000))

  delayWhen(event => interval(Math.random() * 5000))
)
delayedClicks.subscribe(x => console.log(x))

timeInterval

将源Observable发出的每个值转成一个Object，包含当前值、与上一次发出值的时间间隔

const seconds = interval(1000)
seconds.pipe(timeInterval())
  .subscribe(
    val => console.log(val),
    err => console.log(err)
  )
//TimeInterval {value: 0, interval: 1001}
//TimeInterval {value: 2, interval: 999}
//TimeInterval {value: 2, interval: 1001}
//TimeInterval {value: 2, interval: 998}

可以看到，定时器的时间间隔并非是十分精准的，存在3-5ms的误差

timestamp

将源Observable发出的值转成一个Object，包含当前值、当前时间戳

const clickWithTimestamp = fromEvent(document, 'click').pipe(timestamp())
clickWithTimestamp.subscribe(data => console.log(data))
//Timestamp {value: MouseEvent, timestamp: 1605335504062}
//Timestamp {value: MouseEvent, timestamp: 1605335505861}
//Timestamp {value: MouseEvent, timestamp: 1605335509817}
//……

timeout

指定时间内，不发出值就报错

const seconds = interval(1000)
seconds.pipe(timeout(1100))
  .subscribe(
    val => console.log(val),
    err => console.log(err)
  )
//在1100ms内没有接收流，就报错；显然，这里每隔1000ms就会发送一个流，不会进入error流

timeoutWith

在指定时间内，不发出值就推送另一个Observable

const seconds = interval(1000)
const minutes = interval(500)
seconds.pipe(timeoutWith(1000, minutes))
  .subscribe(val => console.log(val))

当seconds超时时，就会发送minutes流取代seconds