我的setTimeout无法正常工作

这是代码：

var stripeAnimation = function() { var streetDivWidth = $('.street_name').width(); var streetFull = $('.street_name .street_name_text'); for(var i=0; i<streetFull.length; i++) { var item = $(streetFull[i]); var widthFull = item.width(); var remainder = widthFull - streetDivWidth; var animationSpeed = widthFull * 5; var summary = streetDivWidth - widthFull; if(summary < 0) { item.children('.gradient_span').addClass('gradient'); infinite(); setTimeout(infinite, 1000); } } function infinite() { item.animate({ marginLeft: '-' + remainder + 'px' }, animationSpeed).animate({ marginLeft: 0 }, widthFull).delay(1000); } } $(document).ready(function() { stripeAnimation(); }); 

看起来它应该在1000毫秒的延迟中反复循环动画 – “setTimeout（infinite，1000）;”。 但事实并非如此。 请帮忙！

Answer 1

如果你想循环，那么你需要使用setInterval（）

 setInterval(infinite, 10000); 

然后

 function infinite() { item.animate({ marginLeft: '-' + remainder + 'px' }, animationSpeed).animate({ marginLeft: 0 }, widthFull); } 

Answer 2

剩余变量是本地的，你正在使用它像全局函数一样。 应该全球宣布它。

Answer 3

setTimeout只会调用你的函数一次，但正如Arun P所说，你可以选择使用setInterval ，但不建议用于动画。 setInterval的问题在于，您指定的延迟间隔是调用它之前的最小时间，但不是在该间隔结束时将调用它的声明。

一个例子是，如果你设置一个300毫秒的间隔，但是队列被其他操作（UI或其他JS操作）阻止，比方说，600毫秒，你的函数将被调用两次，一个接一个地没有延迟，这会使你的动画不均匀。 您无法确保在您的时间间隔内调用超时，但不会低于该时间间隔。

一个更好的方法是使用setTimeout进行第一次初始调用，就像你已经完成一样，并再次在infinite()函数调用setTimeout(infinite, 1000)时进行。

尽管如此，如果它适用，做动画的最佳方法是requestAnimationFrame方法，你可以在这里查看：

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame