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

我认为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);
}

Vue组件中的空闲计时器

1 个答案: