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) {
        // ...
    });

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

1 个答案: