为什么启动多个阶段时，动画第一帧的时间这么长？

Question

我正在网页上启动三个（或更多）Kinetic.Stages。当我独自开始我的第一个阶段时，它正常工作。

但是，当我之后开始任何阶段时，onFrame() 中对 frame.timeDiff 的第一次调用会返回一个巨大的值（一百万，一百万）。

这可能是什么原因造成的？

window.onload = function() {
    var stage1 = new Kinetic.Stage({
        container: "widget1",
        width: 10,
        height: 10
    });

    stage1.onFrame(function(frame) {
        console.log(frame.timeDiff);
    }

    stage1.start();


    var stage2 = new Kinetic.Stage({
        container: "widget2",
        width: 10,
        height: 10
    });

    stage2.onFrame(function(frame) {
        // empty
    });

    stage2.start();


    var stage3 = new Kinetic.Stage({
        container: "widget3",
        width: 10,
        height: 10
    });

    stage3.onFrame(function(frame) {
        // empty
    });

    stage3.start(); 
};

只要只启动一个阶段，它就可以正常工作，但是一旦启动任何其他阶段，帧时间就会变得很长。重新安排开始和初始化不会改变任何事情。

Answer 1

您在使用 Chrome 浏览器吗？在 chrome 中的选项卡之间切换时遇到问题。 （frame.timeDiff 变得很大。由于 Chrome 确实暂停了 javascript（我认为）。

我通过添加解决了这个问题： var timeDiff = Math.min(frame.timeDiff, 50);

希望对你有帮助