循环动画会导致浏览器崩溃吗？

Question

我有一些PNG在屏幕上被无限循环移动，这可能导致某些浏览器崩溃。

例如：

function parachute_drop(drop_object, animation_duration) {

    $(drop_object)
        .animate({top: "750px"},animation_duration)
        .animate({top:"-150px", opacity: 100
        },{
        duration: 0, 
        complete: function(){
            parachute_drop(drop_object,animation_duration);
        }
    });
 }

 parachute_drop('#object_id',10000);

每次动画完成后，它会再次启动该函数并无限循环。

我没有预料到这会成为问题，但我听说这不是很好，我的网站似乎在一段时间后崩溃了。

有没有更稳定的方式来实现这样的无限循环呢？简单地反复将一个9kb的png文件从屏幕顶部移动到底部似乎对系统资源造成了压力。问题出在哪里，我该如何更好地解决它？

- willdanceforfun

---

请查看setTimeout或setInterval。 - switz

@Switz：jQUery正在为他使用这个。 - SLaks

不要使用循环来展示动画，最好去了解一些 JavaScript 游戏库，比如 jawsjs、impact、gamequery 等。更多信息可以在这里找到：https://gist.github.com/768272 - TheVillageIdiot

一个解决方法是在再次调用函数之前使用持续时间非常短的setTimeout，甚至可以是1。 - charlietfl

@SLaks，你是在说上面的函数没有任何问题或资源浪费吗？ - willdanceforfun

Answer 1

你的代码是一个递归算法，当代码堆栈填满浏览器的javascript机器时可能会崩溃。您可以使用基于计时器的不同方法来实现连续循环。

您可以从这个示例开始：http://www.irengba.com/codewell/

- Pascal Piché

---

我明白了，谢谢你。我之前一直在按照那个教程进行操作，但是有人建议我自己编写一个函数并在其内部调用自身。看起来这个教程也是这么做的，但可能使用了不同的方法吧？ - willdanceforfun

那不是真的。@cosmicbdog的代码是异步的，而不是递归的。 - SLaks

动画是基于Jquery代码的异步操作，但是completed方法是一个链式参数，如果它们从未完成链式方法（类似递归），可能会不稳定。 - Pascal Piché

我将上面的重复动画放入everytime()函数中，但仍然导致浏览器崩溃。 - willdanceforfun

我想我发现了问题...... everytime() 函数有一个间隔设置，我将其设置为10。然而，我的循环持续几分钟。因此它们每10秒就会堆积起来 - 这听起来对吗？出于某种原因，我有点难以理解 jQuery 程序员的术语。 - willdanceforfun