如何保持meteor客户端同步?(动画)
我正在寻找如何在制作动画时保持客户同步的想法。我正在尝试使用meteor构建一个基于浏览器的提词器。我有基本的功能,我可以设置字体大小和滚动速度,但我还没有找到一个可靠的方法来保持所有的客户端同步,一旦滚动开始 到目前为止,我尝试了两种方法,都有效,但都不完美 我的第一个想法是在服务器上运行一个间隔,用位置更新集合。这在局域网上正常工作,但一旦我进入互联网,更新和客户端上观察到的更新之间的延迟时间会导致滚动停顿。下面是代码的样子: 服务器:如何保持meteor客户端同步?(动画),meteor,Meteor,我正在寻找如何在制作动画时保持客户同步的想法。我正在尝试使用meteor构建一个基于浏览器的提词器。我有基本的功能,我可以设置字体大小和滚动速度,但我还没有找到一个可靠的方法来保持所有的客户端同步,一旦滚动开始 到目前为止,我尝试了两种方法,都有效,但都不完美 我的第一个想法是在服务器上运行一个间隔,用位置更新集合。这在局域网上正常工作,但一旦我进入互联网,更新和客户端上观察到的更新之间的延迟时间会导致滚动停顿。下面是代码的样子: 服务器: if(Meteor.isServer){ Me
if(Meteor.isServer){
Meteor.methods({
start_scroll: function(){
interval = Meteor.setInterval(function() {
var _speed = Prompter.findOne({_var:"prompter_speed"})._val;
Prompter.update({_var:"prompter_y"}, {$inc:{_val:(-1*_speed/4)}});
}, 30);
}, ...
}
if(Meteor.isServer){
Meteor.methods({
start_move: function(){
Prompter.update({_var:"prompter_move"},{$set:{_val:1}});
}, ...
}
客户:
if(Meteor.isClient){
Prompter.find({_var: "prompter_y"}).observe({
changed: function(pos){
$("#inner_scroll").css({top: pos._val});
}
});
}
if(Meteor.isClient){
Prompter.find({_var: "prompter_move"}).observe({
changed: function(obj){
if(obj._val == 1){
interval = Meteor.setInterval(function(){
var cp = parseFloat($("#inner_scroll").css("top"));
var sp = parseInt(Session.get("_speed"));
var mv = cp + (-1 * sp)/4;
$("#inner_scroll").css("top", mv);
}, 30);
}
else{
Meteor.clearInterval(interval);
}
}
});
}
上述版本的主要问题是,观察更新过程中的任何延迟都会导致动画结巴。所以,我决定在客户端制作动画。以下是我的想法:
服务器:
if(Meteor.isServer){
Meteor.methods({
start_scroll: function(){
interval = Meteor.setInterval(function() {
var _speed = Prompter.findOne({_var:"prompter_speed"})._val;
Prompter.update({_var:"prompter_y"}, {$inc:{_val:(-1*_speed/4)}});
}, 30);
}, ...
}
if(Meteor.isServer){
Meteor.methods({
start_move: function(){
Prompter.update({_var:"prompter_move"},{$set:{_val:1}});
}, ...
}
客户:
if(Meteor.isClient){
Prompter.find({_var: "prompter_y"}).observe({
changed: function(pos){
$("#inner_scroll").css({top: pos._val});
}
});
}
if(Meteor.isClient){
Prompter.find({_var: "prompter_move"}).observe({
changed: function(obj){
if(obj._val == 1){
interval = Meteor.setInterval(function(){
var cp = parseFloat($("#inner_scroll").css("top"));
var sp = parseInt(Session.get("_speed"));
var mv = cp + (-1 * sp)/4;
$("#inner_scroll").css("top", mv);
}, 30);
}
else{
Meteor.clearInterval(interval);
}
}
});
}
使用此版本的客户端上的动画非常平滑,但是(由于观察“开始”更新的延迟),客户端可能不会同时启动,因此不同步。我注意到的另一个问题是,在这个版本中,一些较慢的客户端(CPU性能方面)滚动较慢
我对这件事摸不着头脑,有什么建议吗?我最后使用时间戳比较来保持一切同步。当服务器收到更新请求时,它会创建一个时间戳。时间戳与更新的数据一起传递,以便客户机可以将时间戳与“现在”进行比较并进行相应调整 仍然可以接受其他建议,但这对我来说非常有效