如何在RxJS 5(beta)中跳过过于频繁的鼠标事件?

时间:2016-07-25 19:23:57

标签: rxjs5 backpressure

我在project中使用RxJS 5(beta10)。我的大多数事件都来自鼠标或触摸拖动,我只需要听到最后一个。

即。如何在RxJS5中执行有损流?

在某些平板电脑上运行演示清楚地显示了一个"拖动"当图形更新花费的时间超过浏览器的事件点火时(这种情况不连续,甚至本身 - 浏览器似乎在他们实际告诉事情发生变化的时间间隔内进行优化)时会发生这种情况。

对于有损数据流,我能够始终保持用户体验。

修改

This answer似乎很好地总结了RxJS5背压的当前状态。

2 个答案:

答案 0 :(得分:1)

RxJS5 auditTime方法似乎符合我的要求。

RxJS 4限制的问题在于它给出了某个时间窗口的第一个值,而在拖动中我真的想要最后一个(跳过中间值,如果设备的渲染速度是慢)。 auditauditTime提供了这一点。

剩下的实际上是测试效果。我在事件处理程序中修改SVG图形,并且我不确定这些更改实际在屏幕上显示所需的时间。一个简单的解决方案是让auditTime参数可由用户调整 - 在慢速平板电脑上,它可能需要稍微多于桌面上。理想情况下,我会找到一种方法来查看浏览器渲染的完成时间,然后再询问新的坐标。

答案 1 :(得分:0)

有许多不同的可能解决方案,因为有很多有损流的定义。您可能希望平均拖动点,或者您可能只希望在一段时间内看到第一个或最后一个。

例如,throttle只允许您在经常性时段内选择第一个观察值:

关于rxjs github repo的文档

  

返回一个Observable,它只发出由第一个项发出的项   source在指定的连续时间窗口期间可观察   持续时间。

基本上,如果你想等到输入有 在采取行动之前安静了一段时间,你想要 的去抖即可。它为您提供了一种"结束的中间流"有种感觉。

如果您不想等待,但又不希望在特定时间内处理超过1个观察值,则需要限制

更复杂"损失"算法是可能的,但它们很大程度上取决于您的确切用例,无论您是控制帧更新率还是至少可以挂钩,等等。