jQuery, .empty() and memory

Question

my application (ASP.NET MVC) shows a page which loads data constantly, at certain intervals.

The jQuery script calls a controller and this one renders a different pa

Answer 1

It could just be a bug in jQuery?

I've run into similar issues, mostly when doing tons of AJAX requests over time, in all versions of IE.

This bug describes the problem and a simple patch to jQuery that should fix it:

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

Answer 2

I believe it's not you being wrong, but rather it is the implementation of JavaScript in the browser. Do you face this problem in different browsers (Firefox, Opera, Internet Explorer), or only in some specific browser?

To get a better answer, you should post some of the JavaScript code that renders your page - maybe there are some optimizations possible.

Answer 3

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

Answer 4

You might want to try this instead:

[EDIT] removed function being returned 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 were loading your spinner every time you were loading appointments. Also you were passing in times into the window.setInterval.

My code testing this function is:

$(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);
                }
            });
}

The php file:

//contentServer.php

<?php

echo 'The quick brown fox jumped over the lazy dogs back';

?>