md`# timing | filtering | rate limiting | backpressure`
md`
> _lossy_ vs _lossless_
- https://www.google.com/search?q=rxjs+lossy+lossless
- https://codeburst.io/a-look-at-back-pressure-and-its-handling-in-rxjs-5bc8f04a2e8f
`
import { animationFrameScheduler, interval, timer, delay, auditTime, throttleTime, tap, of, concatMap, mergeMap } from '@egman24/rxjs-6-5-5'
// setInterval
interval(1000).pipe(
tap(console.log)
)//.subscribe()
// setTimeout (second argument works like interval AFTER initial timeout)
timer(4000/*, 1000*/).pipe(
tap(console.log)
)//.subscribe()
// [milliseconds] https://www.learnrxjs.io/learn-rxjs/operators/utility/delay
// [observable emissions] https://www.learnrxjs.io/learn-rxjs/operators/utility/delaywhen
interval(1000).pipe(
tap(x => console.log(performance.now(), (new Date).toISOString(), 'before')),
delay(4000),
tap(x => console.log(performance.now(), (new Date).toISOString(), 'after'))
)//.subscribe()
md`
- https://rxjs.dev/api/index/const/animationFrameScheduler (https://rxjs.dev/guide/scheduler)
- https://www.google.com/search?q=rxjs+request+animation+frame
- https://stackoverflow.com/questions/41818793/how-can-i-use-rxjs-to-generate-a-requestanimationframe-loop
`
// https://gyazo.com/76eec10cf92b22d684af85322472ba83
//interval(0).pipe(
// https://gyazo.com/ec1f3edd64ff26ac9d97080663c81035
interval(0, animationFrameScheduler).pipe(
tap(_ => console.log(performance.now()))
)//.subscribe()
interval(0).pipe(
tap(x => console.log('RAW', x)),
concatMap(x => of(x, animationFrameScheduler)),
tap(x => console.log('animationFrame', x))
)//.subscribe()
/*
rxjs['util']['smoothLoad'] = (ob$) => {
return rxjs.zip(...[
rxjs.interval(0, rxjs.Scheduler.animationFrame),
ob$.pipe(rxjs.operators.map(msg => ({ ...msg, changeId: uuid() })))
]).pipe(
rxjs.operators.map(([_, msg]) => msg),
rxjs.operators.distinctUntilChanged((prev, curr) => prev.changeId === curr.changeId),
)
}
*/
md`
#### lossless throttling mechanism
- https://www.g9labs.com/2016/03/21/lossless-rate-limiting-with-rxjs/
- https://stackoverflow.com/questions/34955842/rate-limiting-http-calls-made-by-rxjs
`
interval(1000).pipe(
concatMap(x => of(x).pipe(delay(4000))),
mergeMap(x => of(x).pipe(tap(console.log)))
)//.subscribe()
// TODO: how are values 'buffered' while waiting to emit... what if these buffers overflow memory... how can this be avoided or handled without loss? dump to storage/localstorage?
// [milliseconds] https://www.learnrxjs.io/learn-rxjs/operators/filtering/audittime
// [observable emissions] https://www.learnrxjs.io/learn-rxjs/operators/filtering/audit
// IGNORES intermediate values, unlike "lossless throttling mechanism"
interval(1000).pipe(
auditTime(4000),
tap(console.log) // 4, 9, 14, 19, 24, ...
)//.subscribe()
// [milliseconds] https://www.learnrxjs.io/learn-rxjs/operators/filtering/throttletime
// [observable emissions] https://www.learnrxjs.io/learn-rxjs/operators/filtering/throttle
interval(1000).pipe(
throttleTime(4000),
tap(console.log) // 0, 5, 10, 15, 20, ...
)//.subscribe()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
