Reset timer after event in angular 2

问题

I am implementing logout after 15 mins idle session without using 3rd party lib or ngrx. I have created a service:

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)}
}

I have create few approach using some rxjs functions, none of them has worked so far, Is it possible to get some help on resetTimer() method? thank you.

回答1:

You could use switchMap on your mousemove event to restart the timer, this route removes the need to keep up with the timer values and just plug 15000 in to set and forget.

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

From the comments below requesting emits, I assumed to be every second, with the value resetting on 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>

回答2:

I am using angular 7 and investigating the ngrx tools I could make this code which I put in a service as a method and used it in each of my components. Now to restart each time you change components, it is necessary to implement Ondestroy to be able to unsubscribe the observable and thus the count will start again for each component that enters. I hope it helps for future projects.

This is the service showing the service 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) At the end of the component code we put the 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();
  }
}

回答3:

I commented above but would this work:

ticks: any;
start: number;
stop: number;

ngOnInit() {
  this.start = 0;
  this.stop = 1000;
}

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

startTimer(){
    this.ticks = Observable.timer(start, stop);
}
resetTimer(){
    // code here
    this.start = 0;
    this.stop = 1000;
}

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

来源：https://stackoverflow.com/questions/47563781/reset-timer-after-event-in-angular-2