时间戳

首页 > 解决方案 > Vue 组件中的空闲计时器

javascript - Vue 组件中的空闲计时器

问题描述

当不再空闲时，我在重置计时器时遇到了一些问题。我正在使用Vue Idle它，它是idle.js.

所以我有一个 id 为 timeout-modal 的模态。当 Vue Idle 触发空闲功能时，我调用showWarningMessage.

在这个函数中，我首先显示我的模态。然后我创建一个计时器，我的模态使用它来进行倒计时。所以这一切都很好。

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

现在在模态中有一个继续按钮。按下时，它应该基本上重置上述计时器。目前我有

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

所以这应该做的是隐藏模式，然后将计时器重置回 10 秒。当控制台正在打印时，它正在输入上述内容IN。当我单击“确定”时，模式也被隐藏了。

但是，下一次显示模态时，计时器已经接近 0，因为它没有重置回 10。

有什么理由不能让我回到 10 秒吗？我认为clearInterval应该重置计时器？

谢谢

标签： javascriptvue.jstimer

解决方案

我认为 clearInterval 应该重置计时器？

你的意思this.remainingTimeoutSeconds是调用时自动设置clearInterval？

答案是不。

您需要将该值重置为 10000，如打击；

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

或者

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

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

推荐阅读