时间戳

首页 > 解决方案 > 为什么 RxJs 在长按键时记录 2 个事件？

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

问题描述

我正在尝试构建一个响应 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);})

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

谁能指出片段有什么问题？提前致谢。

标签： javascriptangularrxjs

解决方案

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

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

为避免按键重复，您可以使用“重复”属性过滤重复的事件。

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/

推荐阅读