jQueryでのメモリリークの回避方法

検索窓に単語を入れるとその単語の検索結果を.loadで別ページの情報を検索結果として読み込ましています。
また検索窓の単語を変えるとページ遷移せずに.load部分を更新できるようにしています。

挙動については問題ないのですが、
その際何度も.load部分が書き換えられるとメモリ不足になってしまいます。

そこでしたいことは、
・メモリの解放？.loadで読み込む前にその前に読み込ました内容を一度リセット出来るようにしたいです。
・また.loadで読み込む際、文字情報だけ読み込ましたいのですが、画像をよみこませない様にはできますか？（表示うんぬんより読み込み時間を減らしたいです。）

以上、独学初心者なので調べても専門用語ばかりで、その都度その用語について調べていると何を調べていたかわからなくなりここで質問させて頂きました。

どうかお助けください。。

java
1<script type="text/javascript">
2$(function(){	
3	function wSearch(){$('.word').each(function(){
4		var word = $(this).text();
5						
6		var contents = 'http://xxxx/' + word;
7		$(this).siblings('.contents').load(contents , function(){	
8			//略
9			});
10		});	
11	}
12	
13$("#word").on("blur",function(){
14  var fome_x_name = $(this).val();
15  $('h1.word').text(fome_x_name)
16  wSearch();	
17	});
18});
19</script>

html
1<body>
2<div id="input">
3<input type="text" name="word" id="word">
4</div>
5  <div id="wrap">
6    <h1 class="word"></h1>
7    <div class="contents"></div>
8  </div>
9</body>

グチャグチャなコードですみません。。
あと、できればキーボードのエンターを押して検索もできるようにしたいのですが、上手くいきません。
現在、検索窓のフォーカスを外すことで起動させています。

unau

2016/01/29 05:24

ご質問の意味、解決したい問題がこれだけの情報ではよくわかりません。今実際に動かしている具体的なコードがあると、回答が得られやすいと思います。

退会済みユーザー

2016/01/29 05:59

すみませんコード晒すのが恥ずかしくて。。ご指摘ありがとうございます。

unau

2016/01/29 06:03

独学初心者でグチャグチャじゃないコードだったらびっくりです。コード晒していっぱいツッコミ入れてもらった方が上達は早いと思います。

ItoTomonori

2016/01/29 06:06

上記のコードで、var word、var contents は、その後の、load(contents , function(){}の呼び出しのクロージャに処理が移行してしまうので、解放されない可能性があります。 word = null; contents = null;などを差し込みましょう。

退会済みユーザー

2016/01/29 07:06

ありがとうございます。 >word = null; contents = null;などを差し込みましょう。どこに挿入すればいいでしょうか。。。

行動規範の内容に同意します

回答2件

たぶん、悩まれているのは、この関連？ではないかと思います。
（実際のコードみてないので、分かりませんが・・・）

javascriptのメモリリーク対策(随時更新)

※上記の記事の例をそのまま参照させていただきます。。。

JavaScript
1function test() {
2        var elt = document.getElementById('i0');
3        elt.src = 't2.png';
4        elt.onclick = function() {
5            location.href = 't2.html'; 
6        }
7    }
8

リークする流れは、関数の最初で、

var elt = document.getElementById('i0');

として、eltのオブジェクトを宣言（つまりここでメモリを確保）しているが、

elt.onclick

で、呼び出される先はfunction(){}（いわゆるクロージャ）で、かつ自己呼び出し(location.href)となるため、結果としてjavaScript側では、eltオブジェクトの解放トリガーがみつけられない（test()関数が終わっていないのに似た状態というか、多重呼び出しというか？？？）まま、再度test()関数が動作してしまう事をくりかえします。なので、eltは延々と確保されつづけらます。

（ただし、JavaScriptのバージョンや、エンジンによっても、このあたりの、ガベージコレクションの実装は違うと思うので、ブラウザによって動作かわるかもしれませんが・・・。）

記事にもありますが、マメに不要な物は、
elt = null;
として、nullで解放してあげるようにするのが、手です。

なんとも、説明が難しい・・・
なので、言葉足らずすいません。

投稿2016/01/29 05:37

ItoTomonori

総合スコア1283

退会済みユーザー

2016/01/29 07:11

ありがとうございます。少し理解するのに時間かかりそうですが、頑張ってみます。

行動規範の内容に同意します

ちゃんと検証していませんが、$('.contents').empty() で div.contents に紐付いているもろもろのデータが解放されるんじゃないでしょうか。駄目かな。

あと、ご質問内容とは話がずれますが、検索文字列は wSearch() 関数の中で $('#word').val() で拾って、wSearch() 関数内で $('#wrap .word') にセットするといいのではないかな、と。そうすれば、エンター入力に対応するときも .keyup() のハンドラ内で wSearch() 呼ぶだけでよくなるので。
エンター押したら ... な処理は、私も昨日、日本語確定時のenterキー入力を判別しつつ入力内容により処理する方法のメモ : Qiita を参考にして作りました。ちょっとアレンジして、keydown 時のキーコードは .data() を使って jQuery のラッパーオブジェクトに格納しましたけれど（$('#word').data('lastKeyCode', keyCode) で格納して、$('#word').data('lastKeyCode') で取り出す感じ）。

投稿2016/01/29 06:32

unau

総合スコア2468

退会済みユーザー

2016/01/29 07:10

ありがとうございます。 $('.contents').empty()　これはどのタイミングで作動？させたらいいですか？ ----- その後の回答が理解できませんでした。。。 wSearch() のカッコの中に $('#word').val() これを書いたらいいですか？すみませんほんとに初心者で。。。

行動規範の内容に同意します

あなたの回答