0

我有两个 setTimeout 函数：一个在 y 轴上随机弹出一个 div，一个垂直移动它。这些需要完全同步，而 setTimeout 只是不会削减它：一旦 y 位置大于窗口高度，div 必须重置其 x 位置，然后重置为 0 以重新开始。类似的东西。我正在考虑以某种方式集成 getMilliseconds，但任何替代方案都可以。
这是当前的 Javascript：

var width = window.outerWidth;
var height = window.outerHeight;
var h2 = height * 5;
//left
function LR() {
    setTimeout(function() {
        var left = [];
        var one = 1;
        do {
            one++;
            left.push(one);
        }
        while (one <= width);
        var random = Math.floor(Math.random() * left.length);
        document.getElementById("test").style.left = random + "px";
        LR();
    }, h2);
}
LR();
//top
function TB() {
    setTimeout(function() {
        var one = document.getElementById("test").offsetTop;
        one++;
        document.getElementById("test").style.top = one + "px";
        if (one == height) {
            one == 0;
            document.getElementById("test").style.top = 0;
        }
        TB();
    }, 2);
}
TB();

如果您想查看我的完整代码和/或预览，我已经设置了一个 JSFiddle：http: //jsfiddle.net/JqVb9/。提前致谢。

4

1 回答 1

0

是的，对于动画，您始终应该检查当前时间 - setTimeout/。Interval绝对不可靠并且容易漂移。

要做到这一点，只需使用Date.now()并使您的动画成为一个数学函数以从时间获取位置（最简单：线性运动）。

正如@JanDvorak 在评论中已经指出的那样，您应该考虑从同一个计时器执行所有动作。这将使动画更流畅，因为您不会经常更改 DOM / 样式 - 每帧通常只渲染一次。此外，这将确保同步。

于 2012-11-03T19:14:07.077 回答