如何让流星客户端保持同步？(动画)

Question

我正在寻找有关如何在动画时让客户端保持同步的想法.我正在尝试使用meteor构建基于浏览器的提词器.我有基本的功能,我可以设置字体大小和滚动速度,但我还没有想出一个可靠的方法来保持所有客户端同步滚动开始.

到目前为止,我尝试了两种方法,两种方式都有效,但两种方式都不完美

我的第一个想法是在服务器上运行一个间隔来更新Collection的位置.这在LAN上工作得很好,但是一旦我移动到互联网,更新和客户端上观察到的更新之间的延迟时间导致滚动结果.这是代码的样子:

服务器:

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.isClient){
    Prompter.find({_var: "prompter_y"}).observe({
        changed: function(pos){
            $("#inner_scroll").css({top: pos._val});
        }
    });
}

上述版本的主要问题是观察更新的任何延迟都会导致动画断断续续.所以,我决定在客户端进行动画制作.这就是我想出来的:

服务器:

if(Meteor.isServer){
    Meteor.methods({
        start_move: function(){
            Prompter.update({_var:"prompter_move"},{$set:{_val:1}});
        }, ...
}

客户:

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性能方面)使用此版本滚动较慢.

我对此有所顾忌,有什么建议吗？

Answer 1

我最终使用时间戳比较来保持所有内容同步.当服务器收到更新请求时,它会创建一个时间戳.时间戳与更新的数据一起传递,以便客户端可以将时间戳与"现在"进行比较并相应地进行调整.

仍然对其他建议持开放态度,但这对我来说非常有用.