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

Question

当我不再空闲时重置计时器时遇到一些问题。我为此使用了 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 应该重置计时器？

谢谢

Answer 1

I thought clearInterval should reset the timer?

您的意思是 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);
}