javascript – 缓冲区/节流元素使用RxJS拖动事件

我想在连续的事件源(拖动元素)上发生某些事情时实现一个场景 – 但是有一些缓冲/限制.我想收到一个通知让我们说

>每400毫秒
>但仅当源中有新项目时(拖动实际发生)

我与下面概述的油门操作器最接近的想法是等待400毫秒的暂停,然后提供序列 – 它不提供连续拖动的值：

Rx.Observable
      .fromEvent(element,"drag")
      .throttle(400);

我想需要一些计时器的来源,但在这种情况下,如何将计时器源和拖动源与上述标准相结合？

解决方法

Rx使用Schedulers的概念(Rx.Scheduler实例是特定的). throttle方法采用可选的第二个参数,即要使用的调度程序.如果您不提供第二个参数,则使用Rx.Scheduler.timeout.此调度程序使用setTimeout来计划将来的事情.

在您的示例中,这意味着无论何时发生拖动事件,油门都会存储事件,并且不会告诉您相关信息.然后它从现在起安排一个动作400ms(通过调度程序,最终意味着通过setTimeout)来通知你事件.如果在此超时到期之前另一个拖动事件到达,则它将取消超时并开始新的超时.这是因为只有当传入的事件暂停至少400毫秒时,节流才会通知您.这意味着如果你拖得很快,那么在你最终减慢拖动之前你不会得到任何事件.

根据您的描述判断,您可能更愿意使用sample而不是油门.如果在该间隔期间发生任何事件,则样本将每n ms给您一个事件,例如

Rx.Observable
    .interval(500)
    .sample(1500)
    .take(5)
    .subscribe(function (x) {
        console.log('x: ' + x);
    });

<script src='https://rawgit.com/Reactive-Extensions/RxJS/v.2.5.3/dist/rx.all.js'></script>

这将产生价值：

"x: 1"
"x: 4"
"x: 7"
"x: 10"
"x: 13"

其中每个值是间歇值总和的平均值,即：

>(0 1 2)/ 3 = 1
>(3 4 5)/ 3 = 4
> ……

你会这样使用它：

Rx.Observable
    .fromEvent(element,'drag')
    .sample(400)
    .subscribe(function (e) {
        // ...
    });