改善JavaScript setInterval代码

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()处理器中。

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

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

可以改进吗？

Answer 1

你应该使用setTimeout而不是setInterval（有很多优点，请看这里：setTimeout or setInterval?），因为你希望它重复你应该在你的tidalWave函数中再次调用tidalWave本身。

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

setTimeout(tidalWave, 500); 

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