2

ページ上に背景のdivをランダムに作成するJavaScriptに問題があります（サイトの背景にこれらのフローティングサークルを作成するため）。スクリプトは次の間隔で実行されます。

var floatInterval = window.setInterval(createFloaters, 10000);
function createFloaters()
            {
                lastHeight = 0;
                pageOffset = $('#logo').offset();
                for(j = 0; j<10; j++)
                {
                    randomSize = j * Math.random()*20;
                    randomTop = Math.random()*randomSize + lastHeight + Math.random()*10 + 10;
                    plusOrMinus = [-1,1][Math.random()*2|0];
                    randomColorNum = Math.floor(Math.random()*colArr.length);
                    randomColor = colArr[randomColorNum];
                    randomLeft = Math.random()*990 + pageOffset.left;
                    randomOpacity = Math.random()*.5;

                    $('#floatContainer').append('<div class="circle d' + j + '" style="width:' + randomSize + 'px; height:' + randomSize + 'px; position: absolute; top:' + eval((randomTop - Math.random()*500)*plusOrMinus) + 'px; left:' + eval((randomLeft + Math.random()*200)*plusOrMinus) + 'px; border-radius:' + randomSize + 'px; background:' + randomColor + '"></div>');
                    lastHeight += randomSize;
                    $('.d' + j).delay(Math.random()*500).animate({top: randomTop, left: randomLeft, opacity: randomOpacity}, Math.random()*5000 + 5000).fadeOut().queue(function(){

                    $(this).remove();


                    });
                }

                console.log('FLOAT LENGTH: ' + $('#floatContainer div.circle').length);
            }

フローティングサークルが作成されると、アニメーション化されてから削除されます。divが完全に削除されていないようです。

タブに焦点を合わせている間に作成されているdivの数を追跡すると、正常な結果が得られます。

Number of Divs: 13
Number of Divs: 21
Number of Divs: 13
Number of Divs: 21
Number of Divs: 13
Number of Divs: 21

次に、タブを切り替え、数分間そこに座って、元のタブに戻ります。これが表示されます。

Number of Divs: 187
Number of Divs: 197
Number of Divs: 207
Number of Divs: 13
Number of Divs: 21
Number of Divs: 13
Number of Divs: 21
Number of Divs: 13
Number of Divs: 21

この問題を修正するにはどうすればよいですか？動的に作成されたdivをメモリから完全に削除するにはどうすればよいですか？アクティビティモニターを確認しましたが、ページが実行される時間が長くなるほど、ページがメモリを占有し続けます。

4

1 に答える 1

4

キューを間違って使用しています。コールバックをfadeOutに追加するだけです。

.fadeOut(function(){$(this).remove();});
于 2012-06-08T22:59:03.280 に答える