如何在Vue中的特定组件范围内定义`setInterval`？

Question

我想运行 setInterval 仅在特定组件的范围内（限制为该组件而不是整个应用程序），因为我正在使用 Quasar 框架的 SPA 模式。

当我设置此功能时，即使我更改了页面的 URL，它也会导致到处都是运行。另外，我检查了这个但这不是我的答案。

我的示例代码：

methods:
  testInterval: function () {
    setInterval(() => this.playCMD(), 2000)
  },
  playCMD: function () {
    // Do something
    console.log('Do something')
  }

此外，最好说我想限制在 VueJs 的特定范围内做某事，而不是在我们通过 SPA 模式使用它时限制在整个应用程序中做某事。

Answer 1

我没有使用过 Quasar 框架，但您可以尝试以下选项：

正在订阅 Vue lifecycle 'destroyed' 事件，然后执行 clearTimeout。

或者

如果您使用的是 Vue-Router，您可以使用 In-Component Guards 导航到另一个组件时的事件，您可以使用它来执行 clearTimeout。

data: () => {
    return {
        timer: null
    };
},
methods: {
    testInterval() {
        this.timer = setInterval(this.playCMD, 2000)
    }
},
beforeRouteLeave (to, from, next) {
    if(this.timer)
        clearInterval(this.timer);
    next();
}

编辑：谢谢@Ali Hallaji。您必须添加对下一个函数的调用才能继续通过管道，如 here.

所述

Answer 2

@Shoejep 非常感谢，成功了。我们必须将 next() 函数添加到 beforeRouteLeave 中。请看下面：

beforeRouteLeave (to, from, next) {
    if(this.timer)
        clearInterval(this.timer)
        next()
}

因为如果我们不将 next() 放入该函数中，我们将无法转到其他路线。

如何在Vue中的特定组件范围内定义`setInterval`？

How to define `setInterval` in the scope of specific component in Vue?

javascript

vue.js

vue-component

vuejs2

quasar-framework