1

我使用了 jQuery .animate（灵感来自如何让 div 在页面上随机移动（使用 jQuery 或 CSS））为多个 div 设置动画。我一直使用 javascript，而不是 jQuery，所以我有点不确定我在这里的立足点。因此最初需要片段。

我的代码完全按预期执行，但似乎我在某处发生了内存泄漏，并且随着时间的推移（大约 10 分钟）浏览器（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;
}
4

1 回答 1

0

在animateDiv()中，您既要启动动画，又要设置超时以从现在开始启动下一个动画 0.1 毫秒。如果您的动画长于 0.1 毫秒（可能是），那么您的动画将无限堆积，最终杀死浏览器。此外，setTimeout()需要整数毫秒，而不是十进制秒数。

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

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

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));
    }
}
于 2012-09-30T13:51:32.323 回答