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

【问题标题】：How to define `setInterval` in the scope of specific component in Vue?如何在Vue中特定组件的范围内定义`setInterval`？
【发布时间】：2020-07-02 23:51:32
【问题描述】：

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

当我设置此功能时，即使我更改了页面的 URL，它也会导致到处运行。另外，我检查了这个link (how to use setInterval in Vue component)，但这不是我的答案。

我的示例代码：

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

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

【问题讨论】：

你能详细说明一下吗？ “它会导致到处跑”是什么意思？
@ajobi 我想在 SPA 模式下更改页面时停止 setInterval 函数，换句话说，我想在该页面的进程完成时完成 setInterval。

标签： javascript vue.js vuejs2 vue-component quasar-framework

【解决方案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 所述，您必须添加对下一个函数的调用才能继续通过管道。

【讨论】：

我会选择第一个选项 -> 生命周期挂钩。我怀疑如果您销毁组件会发生泄漏，但不一定会更改路由（例如使用 v-if 进行条件渲染）
不幸的是，我找不到很多关于您的用例的文档，只有 this 以防您使用 SSR。您也可以尝试使用 'beforeDestory' 事件而不是 'destroyed'，或者作为最后的手段，您可以将路由传递给函数，然后比较它是否等于当前路由。

【解决方案2】：

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

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

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

【讨论】：