CODEWITHSUNDEEP
jqueryfirefoxmemory-leaks
Bobby Jack
Bobby Jack

Reputation: 16018

jQuery memory leak with repeated .ajax calls

I'm using the following pattern which is leaking memory in Firefox:

$(function() {

    (function() {

        var callee = arguments.callee;

        $.ajax({
            url: '...',
            success: function() { ... setTimeout(callee, 1000); },
            error: function() { ... setTimeout(callee, 1000); }
        });

    })();

});

The memory leak remains, even when success/error do nothing other than calling setTimeout again. I'm observing the leak via Windows Task Manager; if the page is left open, memory usage of firefox.exe slowly creeps up. For the final version of this code, I only need to update once a minute, but once-a-second demonstrates the memory leak much faster!

(Note: this looks like a very similar problem to this question, but the selected answer there doesn't appear to cater for Firefox)

Upvotes: 7

Views: 3140

Answers (3)

Matthew
Matthew

Reputation: 2280

I was able to reproduce the problem and solved it as such:

$(function() 
{
    function checkStatus() 
    {
        $.ajax({
          url: '...',
          success: function() { ... setTimeout(checkStatus, 1000); },
          error: function() { ... setTimeout(checkStatus, 1000); }
        });

    }

    checkStatus();

});

What appears to happen is each time your anonymous method is called, it creates a variable and assigns a reference to it. Given enough time, this will fill up memory.

This solution just passes the same function ref around rather than creating a new one with each iteration.

Upvotes: 4

user258030
user258030

Reputation: 399

Try putting callee outside of the functions like so:

var callee = arguments.callee;

$(function() {

    (function() {

        $.ajax({
            url: '...',
            success: function() { ... setTimeout(callee, 1000); },
            error: function() { ... setTimeout(callee, 1000); }
        });

    })();

});

So that memory gets allocated only once for "callee", and not everytime the functions are executed.

Upvotes: -3

Alex Pacurar
Alex Pacurar

Reputation: 5861

maybe worth trying something like this?

$(function() 
{
    (function() 
    {
        var callee = arguments.callee;
        $.ajax(
        {
            url: '...',
            success: function() 
            {
                ... 
                setTimeout(function()
                {
                    callee();
                }, 1000);
             },
             error: function() 
             {
                ... 
                setTimeout(function()
                {
                    callee();
                }, 1000);
              }
        });   
    })();
});

so instad of passing calle to the setTimeout callback, pass an anonymous function that calls calle.

Upvotes: 0

Related Questions