RXJS，当 none 已被使用一段时间后，如何观察鼠标和键盘并执行某些操作？

Question

我需要运行一个函数，如果鼠标没有移动，也没有触摸键盘 100 万。

我尝试了下面的代码，但似乎不起作用。我该如何解决？感谢您的帮助。

mouseEvent$ = fromEvent(document, 'mouseMove');
keyPress$ = fromEvent(document, 'keyup');

merge(
    this.mouseEvent$.pipe(startWith(null)).pipe(switchMap(() => timer(10000, 1000))),
    this.keyPress$.pipe(startWith(null)).pipe(switchMap(() => timer(10000, 1000))),
).subscribe(() => console.log("----));

Answer 1

首先要注意的是您输入的 mouseMove 有误。

我可能会这样做：

merge(
  fromEvent(document, 'mousemove'),
  fromEvent(document, 'keyup')
).pipe(
  share(),
  startWith(null),
  debounceTime(60000),
  take(1),
  retry()
).subscribe(_ => console.log("1 Minute without input"));

Answer 2

这是我对此的看法：

 const mouseMove$ = fromEvent<MouseEvent>(document, 'mousemove');
 const keyPress$ = fromEvent<KeyboardEvent>(document, 'keyup');
 const mergeBothEvents = merge(keyPress$, mouseMove$);
 const interval$ = timer(60000);
 
 mergeBothEvents
     .pipe(
       startWith('initial'),
       switchMap(() => {
         return interval$;
       })
     )
     .subscribe(() => {
       console.log('60 seconds past');
       console.log('Perform function here');
     });

深入了解代码中发生的事情。

fromEvent<MouseEvent>用于捕捉鼠标移动。

fromEvent<KeyboardEvent>用于捕捉键盘按键向上点击事件

merge(keyPress$, mouse$) 用于合并两个可观察对象，以便它们可以运行并行。

timer(60000) 用于检查运行启用所需功能前一分钟的时间。

在mergeBothEvents中我们已经习惯了更多的运算符startWith()和switchMap

startWith()用于edge-case，如果用户在进入页面时没有做任何事情（鼠标或键盘），mergeBothEvents事件将不会发生发射。感谢@MrkSef 指出这一点。

最后switchMap用于在用户移动鼠标或按下键盘时取消之前订阅的事件，使定时器从第0秒重新开始。

RXJS，当 none 已被使用一段时间后，如何观察鼠标和键盘并执行某些操作？

RXJS, How to watch mouse and keyboard and do something when when none has been used for some time?

rxjs

angular

rxjs-observables