JQuery, .empty () and memory

Question

my application (ASP.NET MVC) shows a page that constantly loads data at regular intervals.

The jQuery script invokes the controller and it displays another partial view based on certain conditions.

This partial view is added to the DOM with jQuery; previous elements are deleted using the empty () method.

$(document).ready(function() { var ScheduledAction = function(func, times, interval) { var ID = window.setInterval(function(times) { return function() { if (times > -1) { if (--times <= 0) window.clearInterval(ID); } func(); } } (times), interval); }; ScheduledAction(function() { LoadAppointments(); }, -1, <%=Model.RefreshTimeout %>); }); function LoadAppointments() { $("#AppointmentsList").empty(); $('#loading').html("<img src='Images/bigloader.gif' />"); $.get(UrlAction, function(data) { if (data != '') { $('#AppointmentsList').append(data); $('#loading').empty(); } else { $('#loading').fadeOut(3000, function() { $('#loading').empty(); }); } }); } 

The controller (UrlAction) returns a partial view. For each round, the partial view is different. Once a partial view contains only the image. In another situation, this is a div with some information.

I realized that in one day the browser will load something like 600 MB of memory. What am I doing wrong?

Answer 1

Could this just be a bug in jQuery?

I am having similar problems, mainly when you make a lot of AJAX requests over time in all versions of IE.

This error describes the problem and a simple patch for jQuery that should fix it:

http://dev.jquery.com/ticket/6242

Answer 2

I believe that you are not mistaken, but rather it is an implementation of JavaScript in the browser. Do you encounter this problem in different browsers (Firefox, Opera, Internet Explorer) or only in a specific browser?

To get a better answer, you should post some JavaScript code that displays your page, some optimizations may be possible.

Answer 3

You can check if the DOM is leaking with the Drip tool ( article ) As a temporary workaround, you can completely reload the entire page periodically.

Answer 4

Instead, you can try:

[EDIT] remote function returns to setInterval

 $(document).ready(function() { $('#loading').html("<img src='Images/bigloader.gif' />").hide(); ScheduledAction(LoadAppointments, -1, <%=Model.RefreshTimeout %>); }); function ScheduledAction(func, times, interval) { var ID = window.setInterval(function() { if (times > -1) { if (--times <= 0) window.clearInterval(ID); } func(); }, interval); } function LoadAppointments() { $("#AppointmentsList").empty(); $('#loading').show(); $.get(UrlAction, function(data) { if (data != '') { $('#AppointmentsList').append(data); $('#loading').hide(); } else { $('#loading').fadeOut(3000); } }); } 

I noticed that you downloaded your counter every time you downloaded appointments. Also you went through times in window.setInterval .

My code checking this function:

 $(document).ready(function() { $('#loading').html("<img src='loader64.gif' />").hide(); ScheduledAction(LoadAppointments, 1, 100); }); function ScheduledAction(func, times, interval) { var ID = setInterval(function() { if (times > -1) { if (--times <= 0) clearInterval(ID); } func(); }, interval); } function LoadAppointments() { $("#content").empty(); $('#loading').show(); $.get('contentServer.php', function(data) { if (data != '') { $('#content').append(data); $('#loading').hide(); } else { $('#loading').fadeOut(3000); } }); } 

Php file:

 //contentServer.php <?php echo 'The quick brown fox jumped over the lazy dogs back'; ?>