jQuery（billy.carousel） - 旋转木马有时会疯狂

Question

如果你愿意接受我的解决方案，请提前感谢。我正在网站http://tecnointelcom.com/new/上工作 - 主页上有一个轮播。我正在使用一个jQuery插件“Billy the Carousel”，它不时会在不到1秒的时间内从幻灯片跳到另一个（定期，所以在3秒内大约5个幻灯片），但指标仍然在幻灯片的锚点（它不会像滑块一样疯狂）。

jquery插件位于（与prev链接相同的路径）/js/billy.carousel.jquery.js

init文件位于（与prev链接相同的路径）/js/init.js

请...任何人都可以看到这个并回复我必须在代码中遗漏的东西吗？

Thx，Alex

Answer 1

看起来插件正在排队包含setInterval()动画的函数。最新的现代浏览器已经开始实现名为requestAnimationFrame()的功能以节省资源。从本质上讲，您的动画调用正在堆叠，而其中包含旋转木马的标签失焦或隐藏。当选项卡重新获得焦点时，jQuery会同时执行它们。 jQuery建议你不要这样做。来自他们的.animate()文档：

  

由于requestAnimationFrame（）的性质，您不应该使用setInterval或setTimeout循环对动画进行排队。为了保留CPU资源，支持requestAnimationFrame的浏览器在不显示窗口/选项卡时不会更新动画。如果在动画暂停时继续通过setInterval或setTimeout对动画进行排队，则当窗口/选项卡重新获得焦点时，所有排队的动画将开始播放。要避免这个潜在的问题，请在循环中使用上一个动画的回调，或者将函数附加到元素.queue（）以设置超时以开始下一个动画。

您也可以在动画开始前用.clearQueue()清除对象的fx队列。在billy.carousel.jquery.js的第160行：

object.clearQueue().animate({'marginLeft': "0"}, option.scrollSpeed);