RxJS - 如何手动发射缓冲区/查看缓冲区中的元素答案

【问题标题】：RxJS - how to emit buffer manually / view elements in bufferRxJS - 如何手动发射缓冲区/查看缓冲区中的元素
【发布时间】：2016-09-13 06:20:48
【问题描述】：

如果这些事件之间的时间少于提供的时间，我想要做的是获取键盘事件的数量。也许这不是正确的方法，所以这就是为什么我仍然在同一个地方。

所以首先我用过滤器制作了简单的流来捕捉我感兴趣的每一个事件。接下来，我制作了第二个流并将事件分组成对，我可以在其中测量时间戳。似乎它工作得很好，但只有偶数个事件 - 所以在这段时间之后，我需要检查缓冲区中是否有东西，如果它在那里，我应该将它添加到我的字符串中。

代码：

const timeToWait : number = 500;
const keyDigitsUp$ = Observable.fromEvent(document, "keyup")
  .filter((event:any) => {return ((event.keyCode>=48 && event.keyCode <=57) ||
(event.keyCode>=96 && event.keyCode <=106))});

let bufferedEvents = Observable.from(keyDigitsUp$).bufferCount(2);
let numbers : string = "";

bufferedEvents.subscribe((eventArray) => {
    if (eventArray[1].timeStamp - eventArray[0].timeStamp <= timeToWait)
    {
        numbers+=eventArray[0].key + eventArray[1].key;
    }
    else
    {
        numbers="";
    }
});

有什么方法可以使这个概念有效吗？或者也许我缺少更好的方法。我还提出了其他概念，但它们产生了类似的结果。我当然可以让它以非反应性方式工作并订阅主流 - 如果存在，则保存最后一个事件，然后将其与下一个等进行比较，但由于我正在尝试学习反应式编程，所以我想将其作为尽可能多的反应。

【问题讨论】：

澄清一下：您是想先构建时间框架，然后针对在该时间框架内捕获的事件进行测试，还是想始终将两个事件组合在一起并测试这两个事件是否具有时间跨度超过timeToWait？如果您想针对固定时间范围进行测试，请查看以下内容：jsfiddle.net/bbnprgmr
感谢 Luka 的回复。我的目标是捕获它们之间的时间戳小于指定的事件。它应该像这样工作 - 我在键盘上按下数字，我有 500 毫秒来按下另一个数字 - 否则我将发出带有数字的字符串并清除现有的数字。每次当我及时按下另一个数字（500 毫秒）时，我应该将该缓冲时间重置为另一个时间段（在这种情况下为 500 毫秒）。所以这是时间和组缓冲的混合

标签： javascript reactive-programming rxjs5

【解决方案1】：

你工作太辛苦了:-)

const timeout = 500;

keyDigitsUp$
  .buffer(keyDigitsUp$.debounce(timeout))
  .map(events => (events.length <= 1 ? '' : events.map(event => event.key).join(',')))
  .subscribe(v => console.log('events for timeout ' + timeout + ' msec: '+ v));

查看working jsbin。

其工作方式是仅当您的任何键未按超时（在本例中为 500）毫秒时才关闭缓冲区（即生成一个块）。

我不确定您想对密钥代码做什么，所以我只是用逗号分隔符将它们连接起来。

请注意，rxjs 5 的语法可能略有不同。

【讨论】：