meteor - 如何使 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性能而言）在此版本中滚动速度较慢。

我对此挠头，有什么建议吗？

最佳答案

我最终使用时间戳比较来使所有内容保持同步。服务器收到更新请求后，将创建一个时间戳。时间戳与更新的数据一起传递，因此客户端可以将时间戳与“现在”进行比较并进行相应调整。

仍然可以接受其他建议，但这对我来说很好。