为什么 RxJs 在长按键时记录 2 个事件？

Question

我正在尝试构建一个响应 keyPress 事件的 UI。

我正在使用Angular和RxJS来检测事件。[包是最新的]

代码看起来像

this.keyboard$ = Observable.fromEvent(document, 'keypress')
     .pipe(debounceTime(300))
     .subscribe(e => {console.log(e);})

这段代码在正常情况下工作正常，但在用户按下按键时间过长的极端情况下，一旦松开按键，就会记录第二次按下事件。

我发现了一个解决方法，但 keyup违背了目的。

this.keyboard$ = Observable.fromEvent(document, 'keyup')
     .pipe(debounceTime(300))
     .subscribe(e => {console.log(e);})

我需要为每个按键检测一个事件。

任何人都可以指出代码片段有什么问题吗？提前致谢。

Answer 1

其实它不是一个错误。当您按住某个键时，浏览器会重新发送相同的事件。它称为键重复。

参考：https : //developer.mozilla.org/en-US/docs/Web/Events/keypress

为避免键重复，您可以使用 'repeat' 属性过滤重复事件。

const { fromEvent} = rxjs;
const {filter, map} = rxjs.operators;

var keyboard$ = fromEvent(document, 'keydown')
  .pipe(filter(event => !event.repeat))
  .subscribe(event => {
    console.log(event.code);

  })

我在这里创建了一个 JSFiddle，所以你可以自己尝试：https ://jsfiddle.net/williamxsp/Lq9go1bt/