Question

我目前有一些JavaScript，它使用jQuery动画来创建水动效果。

var waves = function() {
    (function() {
        var FirstWave = function() {
            this.css = function(p) {
                var s = Math.sin(p*5)
                var x = (960 * 2) - (p * 960) + 10
                var y = s * 5 + 15
                return {backgroundPosition: "-" + x + "px", bottom: "-" + y + "px"}
            } 
        };

        var tidalWave = function() {
            $("#waves-1").animate({path: new FirstWave}, 10999, "linear");
        };

        setInterval(tidalWave, 500);
    })();
};

在waves()处理程序中调用

$(document).ready()。

如您所见，setInterval设置为500，即使动画持续时间不到11秒。我这样做是为了确保动画在页面加载时开始，因为只是调用$.animate()没有启动动画。

我确信这样做会有很多速度问题和其他任何问题。

可以改进吗？

Answer 1

您应该使用setTimeout而不是setInterval（有各种优点，请参见此处：setTimeout or setInterval?），因为您希望它重复，您应该在tidalWave函数中再次执行另一个setTimeout，再次调用tidalWave本身。

var tidalWave = function() {
   $("#waves-1").animate({path: new FirstWave}, 10999, "linear");
   setTimeout(tidalWave, 500);
};

setTimeout(tidalWave, 500);

现在你也可以使用$（document）.ready而不是初始超时。

改进JavaScript setInterval代码

1 个答案: