Javascript jquery动画内存问题

我使用了jQuery.animate的灵感来制作许多div的动画。 我一直使用javascript，而不是jQuery，所以我有点不确定我在这里的立足点。因此，最初需要代码段

我的代码完全按照预期执行，但似乎我的某个地方出现了内存泄漏，随着时间的推移，浏览器（IE、chrome和FF）将累积大约500MB的RAM使用量

我无法理解为什么，因为没有排队的指令（如setTimeout的帮助），也没有加载图像等

IF语句允许我在其他时间将类更改为50'z'div，并关闭动画

有人知道调试这类问题吗？随着时间的推移，它会使浏览器崩溃，因此作为一个生产页面，它基本上是无用的。 还有一件事，FF的在线崩溃报告翻得很糟糕，提交后没有“转储”，而且这个问题在chrome/IE上不太明显，因此没有可用的崩溃报告。 我一得到有用的东西就会更新

function animateDiv() {
    for (z = 0; z < 50; z++) {
        var newq = makeNewPosition();
        var oldq = $("#" + z).position()
        var speed = calcSpeed([oldq.left], newq);

        if (document.getElementById(z).class != "b") {
            $("#" + z).animate({
                left: newq
            }, speed, function() {});
        }
    }

    setTimeout(function() {
        animateDiv();
    }, 0.1);
}

function makeNewPosition() {
    var w = $('#content').width() - 25;
    var nw = Math.floor(Math.random() * w);    
    return [nw];
}

function calcSpeed(prev, next) {
    var y = Math.abs(prev - next);
    var greatest = y;
    var speedModifier = 0.1;
    var speed = Math.ceil(greatest / speedModifier);
    return speed;
}

在animateDiv中，您正在启动一个动画，并设置从现在起0.1毫秒内启动下一个动画的超时时间。如果动画的长度可能超过0.1毫秒，则动画将无限累积，最终导致浏览器死机。此外，setTimeout需要整数毫秒，而不是十进制秒数

由于我怀疑您的意图是在完全相同的对象上同时运行多个动画，因此您应该使用上一个动画的完成功能，而不是使用计时器，为一个对象启动下一个动画。这将保证它们永远不会堆积起来。为了安全起见，您还可以在开始下一个动画之前对对象发出.stoptrue，以确保在开始下一个动画之前完成/停止之前发生的任何事情，再次确保它们永远不会无限期累积

您可以使用类似的方法来解决问题并确保安全：

function animateDiv() {

    function animateItem(item) {
        if (!item.hasClass("b")) {
            var newq = makeNewPosition();
            var oldq = item.position()
            var speed = calcSpeed([oldq.left], newq);
            // make sure animations can never accumulate and 
            // then start the next one
            item.stop(true).animate({
                left: newq
            }, speed, function() {
                // run next animation on this object when this one finishes
                animateItem(item);
            });
        }

    }
    // start all animations
    for (z = 0; z < 50; z++) {
        animateItem($("#" + z));
    }
}

---

请正确格式化您的代码。这将使你和其他人更容易阅读。这在生活中是真实的，就像在书堆上一样。相当深！谢谢Rory。像这样试试看，在我看来0,1毫秒对于恢复超时有点乐观？？？Adeneo，我现在正在运行代码。10分钟就可以了。如果在那里重新格式化IF会做什么？仍然很热。0-250Mb只需2分钟。将尝试10次超时，将像slug一样运行，但可能不会以我读取当前代码的方式泄漏，我当前有50次动画迭代运行，一旦完成-超时以允许其他指令完成，然后重新启动功能。不是这样吗？不，动画是异步的，所以你只需保持每0,1毫秒运行50个动画，或者换句话说，每秒钟运行大量动画。@TechiePhil-你的代码每0.1毫秒启动50个动画。它不会等到上一个动画完成后再开始下一个动画，因此它们会无限期地堆积起来，最终会淹没浏览器。完成一些div的动画需要1秒，但其他div的动画只需不到半秒。如果我将setTimeout更改为半秒以上，我会在某些情况下暂停div，而在其他情况下将指令排队吗？@TechiePhil-请阅读我的回答，其中解释了启动下一个项目动画的安全方法是仅在上一个动画完成后才启动它。如果坚持使用setTimeout开始下一轮动画，则必须将该时间设置为比任何动画可能需要的毫秒长，并且应插入.stoptrue，这样动画就永远不会累积并导致此问题。