我怎样才能使它成为一个更好的递归动画 jQuery 脚本？

Posted 2023-05-08

【中文标题】我怎样才能使它成为一个更好的递归动画 jQuery 脚本？

【英文标题】：How can I make this a better recursive animated jQuery script?

【发布时间】：2011-06-08 19:45:30

【问题描述】：

这个想法是为云 div 设置动画，并让它永久地在水平方向上来回动画。这行得通，但不幸的是，我认为它容易出现内存泄漏和 UI 滞后。任何建议将不胜感激，谢谢。

function animateCloud() 
    $('#cloud').animate( right: '+=500' ,  duration: 35000, easing: "linear", queue: true );
    animateOpposite();


function animateOpposite() 
    $('#cloud').animate( right: '-=500' ,  duration: 35000, easing: "linear", queue: true );
    animateCloud();


$(document).ready(function() 
    animateCloud();
);

【参考方案1】：

我认为您的代码根本不会泄漏内存，但您可以创建更短的调用。

function animateCloud() 
    $('#cloud').animate( right: '+=500' ,  duration: 35000, easing: "linear" )
               .animate( right: '-=500' ,  duration: 35000, easing: "linear", complete: animateCloud );

示例：http://www.jsfiddle.net/bh3f4/

【讨论】：

既然 animateCloud() 调用 animateCloud() 又调用 AnimateCloud() 等等，这是否有创建无限递归函数的风险，最终会超过最大调用堆栈？

【参考方案2】：

http://api.jquery.com/animate/

使用可选的回调参数。当动画结束时，jquery 会调用你的函数。为其他方向制作动画的最佳时机。