javascript 如何使用 Vue.js 类设置计时器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33065828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set a timer with a Vue.js class
提问by Jimmy Howe
im just using Vue.js to updates posts on a site im messing around with, this is what ive got so far (im still learning javascript, and not too great at it)
我只是使用 Vue.js 来更新我正在搞乱的网站上的帖子，这就是我到目前为止所得到的（我仍在学习 javascript，而且不太擅长）
[app.js]
[app.js]
var Vue = require('vue');
Vue.use(require('vue-resource'));
var app = new Vue({
el: '#app',
components: {
'postlist' : require('./components/postlist/postlist.js')
}
});
[postlist.js]
[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);
});
}
}
};
What I'm looking for is to have updatePosts fire off every x seconds, how do I do this?
我正在寻找的是让 updatePosts 每 x 秒触发一次，我该怎么做？
ive tried doing this in the app.js
我试过在app.js 中这样做
setInterval(function()
{
app.components.postlist.methods.updatePosts(); // doesnt work
app.postlist.updatePosts(); //doesnt work either
}, 500);
and tried putting the setInterval into the component itself
并尝试将 setInterval 放入组件本身
im pretty lost with this, whats the best way to achieve this?
我对此很迷茫，实现这一目标的最佳方法是什么？
updatePosts running every x seconds?
updatePosts 每 x 秒运行一次？
回答by Bill Criswell
You could start the request cycle in createdor somewhere else in the lifecycle. It's also probably better to use recursion here so you can wait for the response to come back before you send off another one. I didn't test this code fully but it should work.
您可以created在生命周期中或其他地方开始请求周期。在这里使用递归也可能更好，这样您就可以在发送另一个响应之前等待响应返回。我没有完全测试这段代码，但它应该可以工作。
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();
}
}
回答by WhipsterCZ
I have also trouble with scopes in Vue.
我也遇到了 Vue 范围的问题。
this should work
这应该有效
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();
}
}
Functions in Vue works kinda different way, because your method updatePostsis not regular function. It is function defined in $vm.methodsobject. so It can't be called regularly like setTimeout($vm.updatePosts). Actually $vm.updatePostsdoesn't exists. if you called it like $vm.updatePosts()it is different story. $vminstance automatically calls its method... So correct way is setTimeout(function(){ self.updatePosts() },2000)
Vue 中的函数以不同的方式工作，因为您的方法updatePosts不是常规函数。它是在$vm.methods对象中定义的函数。所以不能像setTimeout($vm.updatePosts). 其实$vm.updatePosts是不存在的。如果你称它为$vm.updatePosts()不同的故事。 $vm实例自动调用它的方法......所以正确的方法是setTimeout(function(){ self.updatePosts() },2000)
