Javascriptの無名関数

Question

私は次のコードを持っている：

for (var i=0; i < 20; i++) { 
    var itemButton = $('<button />').click(function(){ alert('Hello'); }).append('Hello'); 
    $('#container').append(itemButton);        
} 

私はonclickの機能をそれぞれのボタンの多くを作成します。それから私は$('#shopSearchTopBar').empty();を使用して＃コンテナをクリアし、ボタンをもう一度作成します。

私の質問です：これはメモリリークの可能性がありますか？ Javascriptは、#container上で.empty（）メソッドを呼び出すか、メモリが解放されたときに初めて作成した匿名関数に使用されるメモリを解放しますか？自分の新しい匿名関数を持つ20個の新しいボタンを安全に追加できますか？

Answer 1

これらの機能は、jQuery.cacheに格納されています。

.empty()のようなjQueryメソッドを使用する限り、そのデータは影響を受けるすべての要素に対してクリーンアップされます。

あなたはこのような何かをした場合：

その後

document.getElementById('container').innerHTML = ''; 

各要素とjQuery.cacheとの間の接続が切断されるので、あなたは、おそらくかなり厄介なメモリリークを持っていると思いますし、データが（そしておそらくそれ以上）になるとキャッシュに孤立している。

コンテンツを削除/上書きするときにjQueryメソッドに固執すると、問題ありません。これをやったとしても

：

$('#container').html(''); 

... jQueryの影響を受けた要素のためにそのデータをクリーンアップします。

Answer 2

すべての匿名関数が警告を表示する場合は、ループ外に関数を定義し、名前で参照します。そうすれば、20回ではなく1回だけ作成されます。

var clickHandler = function(){ alert('Hello'); }; 

for (var i=0; i < 20; i++) { 
    var itemButton = $('<button />').click(clickHandler).append('Hello'); 
    $('#container').append(itemButton);                             
} 

ここではクロージャを使用すると異なりますが、そうは思われません。