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

Question

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

• 每400毫秒
• 但只有在源中有新项目时(拖动实际发生)

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

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

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

Answer 1

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

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

根据您的描述判断,您实际上可能更愿意使用sample而不是throttle.如果在该间隔期间发生任何事件,则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) {
        // ...
    });