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

Question

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

当我设置此功能时，即使我更改了页面的 URL，它也会导致到处运行。另外，我检查了这个链接（如何在 Vue 组件中使用 setInterval），但这不是我的答案。

我的示例代码：

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

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

标签： javascriptvue.jsvuejs2vue-componentquasar-framework

Answer 1

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

1. 订阅Vue 生命周期'destroyed' 事件，然后执行 clearTimeout。

或者

2. 如果您使用的是 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。您必须添加对下一个函数的调用才能继续通过管道，如此处所述。