Question

我在15分钟空闲会话后实现注销，而不使用第三方库或ngrx。我创建了一项服务：

run(){
    window.onload = () => {this.startTimer()};
    window.onmousemove = () => {this.resetTimer()};
}

startTimer(){
    let ticks = Observable.timer(0, 1000);
    return ticks
}
resetTimer(){
    // code here
}

sessionTimeOut(){
    // logic to logout
    this.resetTimer().subscribe(val =>{console.log(val)}
}

我使用一些rxjs函数创建了一些方法，到目前为止它们都没有工作，是否有可能在resetTimer()方法上获得一些帮助？谢谢。

Answer 1

您可以在mousemove事件中使用switchMap来重新启动计时器，此路由无需跟上计时器值，只需将15000插入即可设置并忘记。

const newTimer = () => Rx.Observable.timer(3000);
const mouseMove = Rx.Observable.fromEvent(document, 'mousemove')
    .startWith("loaded")
    .throttleTime(250);
const logOut = mouseMove.switchMapTo(newTimer());

logOut.subscribe(() => console.log('logout'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.min.js"></script>

move mouse around here to not log out

从下面请求发出的评论中，我假设是每一秒，重置值mousemove。

const mouseMove = Rx.Observable.fromEvent(document, 'mousemove')
  .startWith("loaded")
  .throttleTime(250)
  .do(() => console.log("restart timer"));
const newTimer = () => {
  console.log("starting timer");
  return Rx.Observable.timer(0, 1000);
};
const timer = mouseMove.switchMapTo(newTimer());

timer.subscribe(v => console.log(v));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.min.js"></script>

Answer 2

我正在使用angular 7并研究ngrx工具，我可以编写此代码，并将其作为一种方法放入服务中，并在每个组件中使用它。现在，每次更改组件时要重新启动，必须实现Ondestroy才能取消订阅可观察对象，因此，对于每个进入的组件，计数都会重新开始。我希望它对将来的项目有所帮助。

这是显示服务interval-session.service.ts的服务

import { Subject, Observable, timer, Subscription } from 'rxjs';
import { startWith, switchMap  } from 'rxjs/operators';

subscription: Subscription;
private reset$ = new Subject();
timer$: Observable<any>;

intervalCloseSession(){
  this.timer$ = this.reset$.pipe(
    startWith(0),
    switchMap(() => timer(0, 1000))
  );
}

this.timer$.subscribe((i) => {
  console.log("timer", i)
}

（example.component.ts）在组件代码的末尾，我们放置了onDestroy

import { IntervalSessionService } from 'services/interval-session.service';

private intervalService: IntervalSessionService;

constructor() {
   this.intervalService = new IntervalSessionService(authService, broadcastService, 
   user);
}

ngOnInit() {
  this.intervalService.intervalCloseSession();
}

ngOnDestroy() {
  if (this.subscription) {
    this.subscription.unsubscribe();
  }
}

在角度2的事件后重置计时器

2 个答案: