Использование lodash throttle для регулирования событий мыши в течение некоторого времени с автоматическим выходом пользователя из нашего приложения

Question

У меня есть требование в моем проекте, где мне нужно добавить возможность выхода пользователя из системы после 30 минут бездействия. Мой проект использует машинописный и угловой.

Я могу выйти из системы через 30 минут бездействия, но поскольку движение мыши может привести к перерасходу веб-приложения, я хотел использовать throttle/debounce.

Ниже код с дросселем имеет проблему.

Предположим, событие первого клика пользователя происходит в 7. Это запускает таймер для выхода из системы в 7:30.

Теперь, поскольку я использовал газ в течение 29 минут, любой щелчок (7-7:29), кроме последнего, будет игнорироваться. Предположим, что последний щелчок произошел в 7:16. Теперь следующий таймер газа начинается в 7:30, а с момента последнего клика по событию был 7:16, код интеллектуально устанавливает таймер на 7:46. Теперь предположим, что в дросселе № 2 событие происходит в 7:42, теперь, поскольку этот дроссель будет работать до 7:58, таймер не может быть сброшен до 7:59, и, таким образом, даже если событие произошло в 7:42, пользователь получит вышел из системы в 7:46.

Я не уверен, правильно ли я использовал газ. Любое руководство будет высоко ценится.

    constructor(public $element,public userService){
     this.timer=60000; //Just for checking purpose it is 1 minute
     this.setInactivityTimer();
     this.timeNewTimer=this.timer;

     this.myThrottleFunc = _.throttle(function(event){
      this.timeofLastEventInThrottle=event.timeStamp;
      this.timeNow=new Date().getTime();
      console.log("Event Triggered at"+ " "+(new
      Date(this.timeofLastEventInThrottle)));
      this.timeNewTimer =this.timer-(this.timeNow-      
       this.timeofLastEventInThrottle);
      clearTimeout(this.timeoutTimer);
       if(!this.hasFirstEventOccured)
        this.setFirstEventInThrottleTimer();
      else {
        this.setSubsequentEventsInThrottleTimer();
        //this.myThrottleFunc.cancel();
      }
    }.bind(this),this.timeNewTimer-1000);

    $element.on('click',this.myThrottleFunc);
   }

    public setInactivityTimer() {
    this.timeoutTimer=setTimeout(() => {
      this.logoutInactiveUser();
    },this.timer)
  }

    private setFirstEventInThrottleTimer() {
    console.log("Timer" + " "+ this.timer);
    this.timeoutTimer=setTimeout(() => {
      this.logoutInactiveUser();
    }, this.timer);
    this.hasFirstEventOccured=true;
  }

    private setSubsequentEventsInThrottleTimer () {
    console.log("New Timer" + " "+ this.timeNewTimer);
    this.timeNow=new Date().getTime();
    clearTimeout(this.timeoutTimer);
    this.timeoutTimer=setTimeout(() => {
      this.logoutInactiveUser();
    }, this.timeNewTimer);
   }

    public logoutInactiveUser(){
     console.log("Logout at" + " "+ (new Date()));
   }

Answer 1

Я выбрал другой, более простой подход к вашей проблеме. Проверьте следующий код:

constructor (public $element) {
    this.timer = 60000;

    this.debouncedLogout = _.debounce( this.logoutInactiveUser, this.timer );
    this.debouncedLogout();

    $element.on("click", this.debouncedLogout );
}

public logoutInactiveUser(){
    console.log("Logout at" + " "+ (new Date()));
}

Тебе нужно this.logoutInactiveUser после казни this.timer миллисекунды, если больше ничего не произошло за это время. Это делает отладку этой функции лучшим решением:

1. Вы планируете выполнение, когда ваш код инициализируется;
2. Если во время щелчка не происходит this.timer миллисекунды, вы выйдете из системы;
3. Если вы нажмете, следующее выполнение будет запланировано на this.timer миллисекунды с этого момента.