Vue js每x秒触发一个方法/函数答案

【问题标题】：Vue js triggering a method/function every x secondsVue js每x秒触发一个方法/函数
【发布时间】：2018-09-25 17:23:45
【问题描述】：

标题几乎解释了它，但我希望每秒触发一个函数。

我没有尝试过任何东西，也没有太多有用的代码。

我已经做了一些谷歌搜索，到目前为止，我对任何例子都很满意。

另外，我使用的是 laravel 5.6

这不起作用，调用 countDown() 方法

export default {
    ready() {
        window.setInterval(() => {
            this.countDown();
        },1000);
    },

【问题讨论】：

究竟如何“不起作用”？您何时/在哪里调用ready() 函数？
我相信他一定有错误，因为这会在 setInterval 回调中丢失。是吗？您在控制台中看到任何错误吗？
没有名为 ready 的生命周期挂钩。 vuejs.org/v2/api/#Options-Lifecycle-Hooks

标签： vuejs2 laravel-5.6

【解决方案1】：

上面发布的答案每秒触发一次（因为 $nextTick），所以如果您想设置不同的间隔，只需删除 $nextTick（在我的情况下，我将其设置为 30000，因为我必须每 30 次触发一次秒）

mounted: function () {
  window.setInterval(() => {
    this.getNotifications()
  }, 30000)
}

【讨论】：

【解决方案2】：

谢谢大家，我找到了解决方案，只是在谷歌中问了一些正确的问题:)

mounted: function () {
        this.$nextTick(function () {
            window.setInterval(() => {
                this.countDown();
            },1000);
        })
    }

【讨论】：

为什么使用$nextTick？无论如何，您的间隔回调将在开始执行之前等待一秒钟
我没有意识到这是我发现的第一个可行的解决方案

【解决方案3】：

只是为了结合解决方案（因为我无法编辑），下面的代码有效。一个问题是，您还希望在视图被销毁后停止作业，因此您需要在调用 beforeDestroy 挂钩时清除它

mounted: function () {
  this.timer = setInterval(() => {
    this.countDown()
  }, 1000)
},

data() {
  return {
    timer: null
  }
},

beforeDestroy() {
  clearInterval(this.timer)
}

【讨论】：

【解决方案4】：

看看这个。这个对我有用。

created() {
    this.interval = setInterval(() => this.getNotifications(), 3000);
}

【讨论】：

【解决方案5】：

这样做效果最好，因为它确保在销毁组件之前清除间隔而不在数据中定义任何内容。

created: function() {
  const timer = setInterval(() => {
    this.countDown();
  }, 1000);

  this.$once("hook:beforeDestroy", () => {
    clearInterval(timer);
  });
}

【讨论】：