javascript - 是否可以使用 Rx for JavaScript 在一个时间范围内观察一些特定的 dom 事件

Question

keyup如果 dom 事件 ( ) 在某个时间范围内发生特定次数，我会尝试收到通知。我看到有一个节流阀可以在某个时间范围内丢弃事件，我想计算它们。例如，我只想keyup在 500 毫秒内某个文本框的事件发生 10 次时收到通知。

Answer 1

您可以通过保存点击的时间戳并将 10 次点击前的点击时间戳与当前时间戳进行比较来实现：

（我假设你在这里使用 jQuery）

var timestamps = [];
$('.watched').click(function() {
  var now = (new Date).getTime();
  // add the current timestamp in front of the other timestamps
  timestamps.unshift(now);
  if (timestamps.length > 10 && (now - timestamps[10]) < 500) {
    // do whatever you really wanted to do
    clickedTenTimes()
  }
  // clean unneeded timestamps
  while (timestamps.length > 10) timestamps.pop()
});

Answer 2

您可以使用groupByUntil函数从 500 毫秒内触发的 keyup 事件创建可观察组。然后只计算每个可观察组中的事件。如果一个组中有十个或更多事件，那么做一些事情。

var keyups = $('#input').keyupAsObservable()
    .groupByUntil(
        function(x) { return x.currentTarget.id; },
        function(x) { return x; },
        function(x) { return Rx.Observable.timer(500); }
);

keyups.subscribe(function(obs) {
    obs.count()
    .filter(function(count) { return count >= 10; })
    .subscribe(doSomething)
});