1

私はjQuery.animate（divを取得してページ内をランダムに移動する方法（jQueryまたはCSSを使用）からのインスピレーション）を使用して、多数のdivをアニメーション化しました。私はいつもjQueryではなくjavascriptを使用しているので、ここでの私の足がかりは少しわかりません。したがって、最初にスニペットが必要です。

私のコードは期待どおりに動作しますが、どこかでメモリリークが発生しているようです。時間の経過とともに（約10分）、ブラウザ（IE、Chrome、FF）で約500MBのRAMが使用されます。

setTimeoutキューに入れられた命令がないので（助けられたように）、画像の読み込みなどがないので、理由を理解することはできません。

（このIFステートメントは、いつかクラスを変更して50'#z' divに変更し、アニメーションをオフにできるようにするためのものです。）

この種の問題のデバッグについて知っている人はいますか？時間の経過とともにブラウザがクラッシュするため、本番ページとしては基本的に役に立たない。もう1つ、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()10進数の秒数ではなく、整数のミリ秒数を取ります。

まったく同じオブジェクトで複数のアニメーションを同時に実行するつもりはないと思うので、タイマーを使用せずに、前のアニメーションの完了機能を使用して、1つのオブジェクトの次のアニメーションを開始する必要があります。これは、それらが決して積み重ならないことを保証します。安全のために.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 に答える