Javascript 如何使用Vue.js类设置计时器

我只是用Vue.js更新了一个我正在玩的网站上的帖子，这就是我到目前为止所得到的（我还在学习javascript，但不是很擅长）

[app.js]

var Vue = require('vue');

Vue.use(require('vue-resource'));

var app = new Vue({

  el: '#app',

  components: {
    'postlist' : require('./components/postlist/postlist.js')
  }

});

module.exports = {

  template: require('./postlist.template.html'),

  data: function () {
    return {
      'search': '',
      'posts' : {}
    }
  },

  methods: {
    'updatePosts' : function()
    {
      this.$http.get('api/posts', function(responce, status, request)
      {
        this.$set('posts', responce.data);
      });
    }
  }
};

[postlist.js]

var Vue = require('vue');

Vue.use(require('vue-resource'));

var app = new Vue({

  el: '#app',

  components: {
    'postlist' : require('./components/postlist/postlist.js')
  }

});

module.exports = {

  template: require('./postlist.template.html'),

  data: function () {
    return {
      'search': '',
      'posts' : {}
    }
  },

  methods: {
    'updatePosts' : function()
    {
      this.$http.get('api/posts', function(responce, status, request)
      {
        this.$set('posts', responce.data);
      });
    }
  }
};

我想要的是让updatePosts每x秒启动一次，我该怎么做

我在app.js中尝试过这样做

setInterval(function()
{
  app.components.postlist.methods.updatePosts(); // doesnt work
  app.postlist.updatePosts(); //doesnt work either
}, 500);

并尝试将setInterval放入组件本身

我对此很迷茫，实现这一目标的最佳方式是什么

---

更新每x秒运行一次？

您可以在生命周期中或生命周期中的其他地方启动请求周期。在这里使用递归可能更好，这样您可以等待响应返回，然后再发送另一个响应。我没有完全测试这段代码，但它应该可以工作

module.exports = {
  template: require('./postlist.template.html'),
  data: function () {
    return {
      'search': '',
      posts: {}
    }
  },
  methods: {
    updatePosts: function () {
      this.$http.get('api/posts', function(responce, status, request) {
        this.posts = responce.data;
        setTimeout(this.updatePosts, 2000);
      });
    }
  },
  created: function () {
    this.updatePosts();
  }
}

---

我在Vue中的作用域也有问题

这应该行得通

module.exports = {
  template: require('./postlist.template.html'),
  data: function () {
    return {
      'search': '',
      posts: {}
    }
  },
  methods: {
    updatePosts: function () {
      var self = this;
      self.$http.get('api/posts', function(responce, status, request) {
        self.posts = responce.data;
        setTimeout(function(){ self.updatePosts() }, 2000);
      });
    }
  },
  created: function () {
    this.updatePosts();
  }
}

---

Vue中的函数的工作方式有点不同，因为您的方法

updatePosts

不是常规函数。它是在

$vm.methods

对象中定义的函数。因此不能像

setTimeout（$vm.updatePosts）

那样定期调用它。实际上，

$vm.updatePosts

不存在。如果您像

$vm.updatePosts（）

那样调用它，情况就不同了<代码>$vm实例自动调用其方法。。。所以正确的方法是

setTimeout（function（）{self.updatePosts（）}，2000）

如果您想让

updatePosts

方法每5秒调用一次，那么您应该将其更改为500到5000ms。然后放置一个警报或

console.log

以查看

setInterval

是否每x毫秒调用一次。它的工作方式有点不同，因为您的方法

updatePosts

不是常规函数。它是在

$vm.methods

对象中定义的函数。因此不能像

setTimeout（$vm.updatePosts）

那样定期调用它。实际上，

$vm.updatePosts

不存在。如果您像

$vm.updatePosts（）

那样调用它，情况就不同了<代码>$vm实例自动调用其方法。。。所以正确的方法是

setTimeout（function（）{self.updatePosts（）}，2000）

setTimeout（function（）{self.updatePosts（）}，2000）和

setTimeout（self.updatePosts，2000）

之间没有区别。事实上，这个答案是可以更新的。不再需要

var self=this

。我要这么做。