Where is memory leak in javascript / jquery?

Question

I have two singleton:

Search - performs a search function

Theme - presentation of topics (search results)

var Search = new function () { this.GetTopics = function () { var query = $("#globalSearch").val(); $.ajax({ url: 'Search/GetTopics', dataType: 'json', data: { query: query }, success: function (result) { var links = $("<ul />") .click(function (event) { Search.OpenTopicContent(event); }); $.each(result.Topics, function (key, value) { links.append( Topic.FormatTopic(value.Name, value.Id, value.Rank) ); }); $("#searchResult").empty(); $("#searchResult").html(links); } } }(); 

This is a singleton theme:

 var Topic = new function () { this.FormatTopic = function (name, id, rank) { var li = $("<li />") .attr("id", id) .addClass("{rank:" + rank + "}") var topicName = $("<p />") .append(name) .addClass("tName"); return li.append(topicName); } }(); 

Here is the challenge

 $("#searchButton").click( function () { Search.GetTopics() }); 

So, Search.GetTopics () should format the list of topics and present them in the div #searchResult.

The number of topics can be around 100.

The problem is that each search call increases memory usage from 1-3 MB. This happened in IE8 and Firefox.

This is an RIA with long scenarios, so it is important to limit memory usage.

Where is the problem? How can I optimize code refactoring? Is it wise to use single characters this way?

Answer 1

Google chrome memory profile r can help you.

So you can see the memory usage of your objects.

Answer 2

Both Ajax calls and error. () Will be memory leaks in IE. See the following:

http://blog.linkibol.com/2010/05/07/did-you-know-that-jquery-leaks-memory-like-a-fountain/

JQuery memory leak with DOM removal