javascript - Vue.js 销毁在组件内运行的 setInterval

Question

在我用 VUE 制作的 SPA 中，我有一个组件运行一些递归的 setInterval 函数(这是一个倒计时)。当我将 View 切换到另一个组件时，我注意到倒计时在后台继续，但我更喜欢破坏 setInterval。
我尝试使用具有倒计时的全局数据，然后在销毁的钩子(Hook)上将其销毁，但它不起作用。
这是我的代码:

    data: function () {
        return {
            counters: ""
        }
    }),

   methods: {
     countdown(index, exp) {
        ...
          this.counters = setInterva()
        ...
        },
   },

   destroyed(){
        console.log(this.counters); // returns a progressive integer
        clearInterval(this.counters);
        console.log(this.counters); // returns same integer
        this.counters = 0;
        console.log("destroyed");
    } 

但在控制台中我得到:

destroyed

app.js:64433 0

app.js:64398 Missing counter_1 . <--- which means counter is still running

感谢您的任何建议!

Answer 1

根据您是否调用 countdown，这里可能会发生两件事。或不:

1. countdown不叫
countdown(index, exp)需要在 created 中定义如下图所示。此外，一种方法foo()应绑定(bind)到此间隔以获得预期的功能。

  created: function(){
      this.counterInterval =  setInterval(
        function()
        {
          this.foo();
        }.bind(this), 500);
    return this.foo();
  },
  destoyed: function(){
    clearInterval( this.counterInterval )
  },

2. countdown被正确调用但组件实际上没有被破坏

如果错误实际上是对“销毁”组件的含义的误解，以使组件不会被销毁，则可以使用与上述相同的代码，但是 data isShowing: true 的 Prop 限制在 JSX 内将解决问题。

只需对 isShowing 进行 v-if 检查如果元素在 View 中，则执行事件监听器。如果元素在 View 中，那么我们有 isShowing===true .否则，假的。