Idle timer within Vue Component

Question

I am have some issues resetting my timer when no longer idle. I am using Vue Idle for this, which is a wrapper for idle.js.

So I have a modal with the id timeout-modal. When Vue Idle triggers the idle function, I call showWarningMessage.

Within this function, I first display my modal. I then create a timer which my modal uses to do a countdown. So this all works fine.

<script>
    export default {
        data() {
            return {
                timerId: 0,
                remainingTimeoutSeconds: 10000
            }
        },
        computed: {
            second() {
                return this.remainingTimeoutSeconds / 1000;
            }
        },
        onIdle () {
            this.showWarningMessage();
        },
        methods: {
            showWarningMessage() {
                this.$bvModal.show('timeout-modal');
                this.warning = true;

                 this.timerId = setInterval(() => {
                    this.remainingTimeoutSeconds -= 1000;
                }, 1000);
            },
        }
    }
</script>

Now within the modal there is a continue button. When pressed, it should basically reset the above timer. At the moment I have

handleContinueButtonClick(response) {
    if (response.data.success) {
        console.log("IN")
        this.$bvModal.hide('app-timeout-reminder-modal');
        clearInterval(this.timerId);
        return;
    }
}

So what this should do is hide the modal, and then reset the timer back to 10 seconds. It is entering the above as the console is printing IN. The modal is also hidden when I click OK.

However, the next time the modal is displayed, the timer is already near 0 as it did not reset back to 10.

Is there any reason why I cant get this back to 10 seconds? I thought clearInterval should reset the timer?

Thanks

Answer 1

I thought clearInterval should reset the timer?

Do you mean this.remainingTimeoutSeconds is set automatically when calling clearInterval?

The answer is no.

You need to reset that value as 10000 like blow;

handleContinueButtonClick(response) {
  if (response.data.success) {
      console.log("IN")
      this.$bvModal.hide('app-timeout-reminder-modal');
      this.remainingTimeoutSeconds = 10000;
      clearInterval(this.timerId);
      return;
  }
}

or

showWarningMessage() {
  this.$bvModal.show('timeout-modal');
  this.warning = true;
  this.remainingTimeoutSeconds = 10000;

  this.timerId = setInterval(() => {
    this.remainingTimeoutSeconds -= 1000;
  }, 1000);
}