JQuery ダイアログのメモリ リークの問題 solution_jquery

WBOY
リリース: 2016-05-16 18:24:57
オリジナル
1073 人が閲覧しました

ページの場合、JQuery のダイアログは効果という点では悪くなく、数行のバインディング コードだけでポップアップ効果を実現できます。
コード

コードをコピー コードは次のとおりです:

$('#dialog ').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close" );
},
"キャンセル": function() {
$(this).dialog("close");
}
};

JS の対話性がほとんどない一部の一般的なページでは問題ありません。しかし、DOM を動的にロードおよび解放する必要がある高度にインタラクティブなページの場合、これは悲劇です。なぜこんなことを言うのですか?次の例を見てください:
単純なコード部分がページに動的にロードされ、その DIV が Dialog にバインドされてポップアップの目的を達成します。以下のテスト要素は
です。
コード


function TestAppend() {
$("#test").append('
'
'アップロード'
'アップロードをキャンセル
');
$('#dialog').dialog({
autoOpen: false,
width: 600 ,
ボタン: {
"OK": function() {
$(this).dialog("close");
},
"キャンセル": function() {
$(this).dialog("close");
}
}
});
return
}


need DOM 要素を削除するには、一般的に、通常のアプローチは $("#test").empty(); この単純なコード行で完了です。これは機能しますか? !このコードを実行した後、$('#dialog') を使用してダイアログ要素を取得します。これで、憂鬱なことが起こります。なぜ!もう空いてませんか?
この悲劇がどのように引き起こされたのかを見てみましょう。
$('#dialog').dialog に注目して、コードを追跡するときに JQuery 実装コードがどのように記述されているかを見てみましょう。ダイアログ クラスの _create メソッドで問題の原因が判明しました。次のコードを確認してください。


uiDialog = (self.uiDialog = $('
'))
.appendTo(document.body)
.hide ( )
.addClass(uiDialogClasses options.dialogClass)
.css({
zIndex: options.zIndex
})
// tabIndex を設定すると div がフォーカス可能になります
// 設定の概要0 に設定すると、Mozilla でフォーカスに境界線が表示されなくなります。 keyCode &&
event.keyCode === $.ui.keyCode.ESCAPE) {
self.close(event)
event.preventDefault();
.attr({
role: 'dialog',
'aria-labelledby': titleId
})
.mousedown(function(event) {
self.moveToTop(false,event) );
}),


また、div を動的に作成し、その div を Body に追加し、ダイアログ内の要素を
から削除します。新しい div に追加します....
これが、$("#test").empty() を実行した後、内部ダイアログに影響を与えない理由です。そして、これには最悪の点があり、メモリ リークが最も発生しやすいものでもあります。Body 内に動的に div が作成されるため、フォームが閉じられていない場合は、引き続き上記の TestAppend メソッドを使用して DOM を動的にロードすることになります。このような div を N 個作成します!
実際、この問題のもどかしい部分は解決方法ではなく、深く隠されていて見つけるのが難しいのです。それを発見すると、解決策は非常に簡単になります:



コードをコピーします

コードは次のとおりです: if ($('#dialog')[0]) { $('#dialog').parent().empty(); $('#dialog').parent() .remove( ); }

このコードを追加した後、$("#dialog") を実行してテストすると、最終的に期待した結果が表示されました。ダイアログ要素が消えてしまいました。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!