改进JavaScript setInterval代码

我现在有一点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（）
并不会启动动画

我相信这样做会有很多速度问题和其他问题

它可以改进吗？
您应该使用setTimeout而不是setInterval（有很多优点，请参见此处：），因为您希望它重复，所以您应该在tidalWave函数中执行另一个setTimeout，再次调用tidalWave本身

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

setTimeout(tidalWave, 500);

现在您还可以使用$（document）.ready而不是初始超时。
您是在用一个立即调用的匿名函数表达式包装整个函数体吗？你为什么要这样做？我在
waves（）
中有不止一个动画，那么
$（文档）呢。ready（）
和no
setInterval
在all@James您是否在ready处理程序中执行waves

函数？@davin，waves函数在$（document.ready（）中调用已经：）并且我需要动画不断重复，如果我删除了

setInterval

setTimeout

如果

animate

运行正常，就不能重新调用函数，这似乎是一种更干净的方法。干杯如果animate仍在运行，setTimeout可以调用该函数。如果要在动画完成后再次调用该函数，请使用animate提供的回调函数。