関数をループするとJavaScriptが応答しなくなる

Question

私は雪片を試したコードです。すべてが大丈夫ですが、スクリプトが応答しなくなるという一定の期間（ブラウザのFirefoxを遅くします）。 なぜこれが起こるのかわかりません。 ブラウザに何もせずに応答性の高いものにするにはどうすればよいですか。 は、ここで私はそれが応答スクリプトいずれかを起こさないことができますどのようにFIDDLE

です。！ は私はjavascript関数をループでミスを犯した:( 任意の提案は素晴らしいことだと思います

おかげ

Javascriptを：。

// window.setInterval(generateSnow, 0); 
var windowHeight = jQuery(document).height(); 
var windowWidth = jQuery(window).width(); 
function generateSnow() { 
    for (i = 0; i < 4; i++) { 
     var snowTop = Math.floor(Math.random() * (windowHeight)); 
     snowTop = 0; 

     var snowLeft = Math.floor(Math.random() * (windowWidth - 2)); 
     var imageSize = Math.floor(Math.random() * 20); 

     jQuery('body').append(
      jQuery('<div />') 
       .addClass('snow') 
       .css('top', snowTop) 
       .css('left', snowLeft) 
       .css('position', 'absolute') 
       .html('*') 
     ); 
    } 
} 


function snowFalling() { 
    jQuery('.snow').each(function(key, value) { 
     if (parseInt(jQuery(this).css('top')) > windowHeight - 80) { 
      jQuery(this).remove(); 
     } 
     var fallingSpeed = Math.floor(Math.random() * 5 + 1); 
     var movingDirection = Math.floor(Math.random() * 2); 
     var currentTop = parseInt(jQuery(this).css('top')); 
     var currentLeft = parseInt(jQuery(this).css('left')); 
     jQuery(this).css('top', currentTop + fallingSpeed); 
     if (movingDirection === 0) { 
      jQuery(this).css('bottom', currentLeft + fallingSpeed); 
     } else { 
      jQuery(this).css('bottom', currentLeft + -(fallingSpeed)); 
     } 
    }); 
} 

window.setInterval(snowFalling, 15); 
window.setInterval(generateSnow, 1000); 

Answer 1

あなたはたくさんの追加と削除している実行時にページ上の要素の数を減らし、ブラウザがそのページの構造を頻繁に更新するようにします。

このアプローチは次のとおりです。十分なdiv要素を削除、生成し、生成された削除、生成、削除された後、あなたが行うことができます

1. 最悪の事態は、性能面
2. おそらくその膝にブラウザの秋を作ります... ...

この設定でモバイルブラウザが2秒後にフリーズしている可能性があります。

最初にすべてのDIVを事前に生成し、再使用し、CSSアニメーションまたはjQuery animate()を使用して、何をしようとしているのかをお勧めします。

Answer 2

@ ZathrusWriterに記載されているように、スノーフレーク要素を再利用して、メモリが膨らまないようにしてください。

スノーフレークの束を作成した後にブラウザが遅くなる理由は、JavaScriptがgarbage collectorを使用してメモリを管理するためです。したがって、メモリは新しい雪片のメモリを割り当てるよりもはるかに遅く解放されています。理想的には、すべての雪片のメモリを一度割り当てる必要があります。

基本的には、任意の時点で画面に表示する雪片の数の要素を作成します。開始するには、それらをランダムな場所にすべてスクリーン上に置きます。その後、雪片が画面外になったり見えなくなったりすると、その雪片は再び使用可能になります。だから、別の場所に移動して、それを再び雪片のように落とす（それを削除して新しいものを作成するのではなく）。

これはパーティクルエミッタの作成から1歩です。