1

I'm using RxJS 5 (beta10) in a project. Most of my events originate from a mouse or touch drag, and I would only ever need to hear the last one.

i.e. How do I do a lossy stream in RxJS5?

Running the demos in certain tablets clearly show a "drag" that happens when the update of the graphics takes longer than the event ignition from the browser (which is not continuous, even itself - browsers seem to optimize on the interval they actually tell things changed).

With a lossy data stream I'd be able to make the user experience always keep up with the finger.

Edit:

This answer seems to sum up the current state of RxJS5 backpressure pretty well.

Community
  • 1
  • 1
akauppi
  • 17,018
  • 15
  • 95
  • 120
  • 1
    Note backpressure has since been removed in RxJS 5 because it has several issues. – paulpdaniels Jul 27 '16 at 23:49
  • Thanks @paulpdaniels but I'm not necessarily looking for true backpressure here. The 'controlled' of RxJS4 would suffice, and I think I'll find a solution to it this weekend. Will post here, of course. – akauppi Jul 30 '16 at 20:05

2 Answers2

1

The RxJS5 auditTime method seems to fit my bill.

The problem with RxJS 4 throttle was that it gives the first value of a certain time window, and in dragging I really wanted the last (skipping intermediate values, if the rendering speed of the device is slow). audit and auditTime provide exactly this.

What remains is actually testing the effect. I modify SVG graphics in my event handler, and I'm not sure how long it takes for those changes to actually get visible on the screen. A simple solution would be to make the auditTime parameter adjustable by the user - on slow tablet it might need to be slightly more than on a desktop. Ideally, I would find a way to see when the browser rendering is finished, and ask for new coordinates only then.

akauppi
  • 17,018
  • 15
  • 95
  • 120
0

There is a lot of different possible solutions because there are a lot of definitions of a lossy stream. You could want to average drag points, or you could want to only see the first or last within a period.

For example throttle would allow you to only pick the first observed value within a period with recurring periods:

Documentation on rxjs github repo

Returns an Observable that emits only the first item emitted by the source Observable during sequential time windows of a specified duration.

Basically, if you would like to wait until the inputs have quieted for a certain period of time before taking action, you want to debounce. It gives you a type of "ended intermediary stream" kind of feel.

If you do not want to wait at all, but do not wish to process more than 1 observed value within a specific amount of time, you will want to throttle.

More sophisticated "lossiness" algorithms are possible, but they depend strongly on your exact use case, whether you control your frame update rate or at least can hook into it, and more.

Ben Dadsetan
  • 1,565
  • 11
  • 19
  • Thanks, Ben. I simply wanted to get the last value, when the rendering caused by the earlier one has finished. `auditTime` takes me close to this, as explained in my answer. – akauppi Jul 30 '16 at 22:16