Javascript 不使用递归创建jquery无限动画？

如何使用jquery创建无限动画， 但不使用递归方式

我找到的递归解决方案：

使用递归的问题是： 设置动画时，当前页面的浏览器选项卡将占用越来越多的内存。

已更新测试结果 结论。。。所有方法都会消耗相同数量的内存，最终会被释放，不会永远持续构建，所以这不是一个真正的问题。

例1 这就是OP最初在Chrome中内存使用量增加时遇到的问题

(function($){
    $(function(){  //document.ready

        function start() {
                $('#animate').animate({'margin-left':'150px'}, 1000, function () {
                    $(this).animate({'margin-left':'50px'}, 1000, 'linear', start);                
                });
        }
        start();

    });
})(jQuery);

例2 当前解决方案包括Bergi要求的回调，以避免setinterval中的潜在“漂移”

(function($){

    $(function(){  //document.ready

    });

    (function customSwipe(element) {
        element
            .animate({"margin-left" : "150px"}, 1000)
            .animate({"margin-left" : "50px"}, 1000, function(){
                setTimeout(function(){
                    customSwipe(element);
                }, 2000);
            });
    })($('#animate'));

})(jQuery);

例3 我给出的原始答案，使用setInterval（）

框架w/Jquery 空页，仅包含#animate元素

(function($){
    $(function(){  //document.ready



    });
})(jQuery);

选项卡打开10分钟后的数据 有趣的是，没有做任何事情的代码仍然略微提高了使用率。这些值随着内存的使用和释放而上下波动。另一件事是使用任务管理器中的“清除内存”按钮来查看有多少已用内存是等待收集的垃圾

25分钟后的数据 结论。。。所有方法都会消耗相同数量的内存，最终会被释放，不会永远持续构建，所以这不是一个真正的问题。

因此，使用最可靠的声音代码将是最好的选择，示例2将是我的选择

使用回调更新 您是否尝试过将

setTimeout

与

$.animate（）

一起使用

如果不需要setTimeout（）在动画之间延迟，请删除它

您可能还希望了解更多复杂的动画

结论。。。所有方法都会消耗相同数量的内存，最终会被释放，不会永远持续构建，所以这不是一个真正的问题。

您在Chrome TM中看到的是，每当它触发动画时，都会请求大量内存，操作系统会将内存“提交”给Chrome进行操作。一旦操作完成，内存仍将提交。在某个时刻，Chromes垃圾收集器出现并释放内存，您的使用情况统计数据将下降。因此，如果你观察的时间足够长，你会看到记忆上下波动

您可以将--purge memory按钮放在Chrome命令行的末尾，以便在Chrome TM中使用purge memory按钮。这可能会帮助您了解实际等待释放的内存量

---

希望这个答案对您和其他人有所帮助。

您实际上犯了一个错误，认为代码是“递归的”。它不是递归的。您关于“当前页面的浏览器选项卡将占用越来越多的内存”的评论并不是因为该代码中存在任何递归。如果每秒内存泄漏（根据您的评论），那么问题就出在其他地方

代码的实例实际上是按顺序运行的，而不是通过嵌套的堆栈调用（即线性和非递归）

使用链接到的最基本示例：

function start() {
    $('#element').animate({}, 5000, 'linear', start);
}
start();

以下是实际发生的情况：

• 定义一个名为

  start

  的函数，然后调用一次
• 在

  start

  内部，启动动画操作，然后

  start

  立即退出

• animate

  只是将信息添加到元素的单个动画队列中，然后返回
• 动画队列由单独的进程（单个计时器等）逐步处理
• 当排队条目满足其预期的结束状态时，它调用回调-存储在排队条目中的全局

  start

  函数
• 该简单操作会在动画队列中添加另一个条目并退出

---

基本上，代码看起来是递归的，但是由于操作是异步的，通过队列，它不是递归的。我不知道这些是否有正式名称，所以我称它们为链式回调。

您是否确实验证了它占用了越来越多的内存请显示您正在使用的代码。为什么不使用CSS动画？@Foon我使用chrome任务管理器在chrome中打开了我的页面进行检查（shift+esc），该页的内存每秒都在增加。@charlietfl我使用的模式如下：这不是一个真正有用的答案

setInterval

可能会漂移，当它确实比实际动画快一点时，您就真的开始填满内存了。要知道动画何时完成，请使用回调，这就是它们的作用。@bergi我真的应该为此投反对票吗？我一开始没有得到OP的支持票。加上OP把它标对了。这意味着它对他们有效，所以漂移的“可能性”是遥远的，不会影响他的实现。请删除否决票。谢谢。如果你对每个有解决方案的人都投了反对票，而这些解决方案很可能会发生一些罕见的失败，那么你会整天投反对票，但是，嘿，也许你就是这么做的。我个人有更好的事情要做，而不是憎恨那些试图帮助别人的人。是的，我认为它应该被否决，因为我认为这是一个糟糕的实践（它不仅是漂移，而且是可读性和可维护性，如果某人改变了代码> 1000代码/代码>到<代码> 1500 < /代码>，但是错过了调整<代码> 2000 < /代码>？OP是否投了赞成票，或者他是否接受了，都无关紧要。我不是在到处仇恨，我的投票也不是针对个人的。当我遇到一个好的答案时，我会投赞成票，当我遇到一个不好的答案时，我会投反对票，并评论错误/可以从我的观点中改进的地方。@Littlee我用更好的解决方案更新了这个答案。术语“伪递归”。基本上，它是递归，但调用堆栈优化了它（就像尾部调用）。@Bergi：称我为老派，但这不符合我对递归的定义（代码实际上调用自己）。在这种情况下，一个单独的

CODE            STARTING    ENDED
Example 1       14.300k     19.996k
Example 2       14.300k     20.020k
Example 3       14.300k     20.344k
Skeleton w/ jQuery  14.300k     15.868k

Example 1       14.300k     18.640k
Example 2       14.300k     18.724k
Example 3       14.300k     18.876k
Skeleton w/ jQuery  14.300k     15.868k

(function($){
    (function customSwipe(element) {
        element
            .animate({'margin-left':'150px'}, 1000)
            .animate({'margin-left':'50px'}, 1000, function(){
                setTimeout(function(){
                    customSwipe(element);
                }, 2000);
            });
    })($('#animate'));

    $(function(){  //document.ready


    });

})(jQuery);

function start() {
    $('#element').animate({}, 5000, 'linear', start);
}
start();