Javascript memory leak when switching between images (FireFox4)

Question

I have, what I think, is a fairly trivial bit of javascript. If I run this really fast, so that the situation is exacerbated, memory allocation in FireFox 4 keeps increasing. I tried this in chrome and memory seems to remain stable.

Is this a FF4 issue or do I have I constructed my JavaScript poorly?

Note no other JS files are loaded on the page. I am running FF in "safe mode" with all addons disabled. No other tabs are loaded.

<img id="heartbeat" name="heartbeat" src="/web/resources/graphics/greylight.png" />

    <script type="text/javascript">

        var hasTimedout = 1;
        var lastPollTime = new Date();;
        var maxDifference = 6000 * 2; //allows us to miss one poll of the data without showing anything bad

        function heartbeat()
        {
            var curTime = new Date();

            var diff = curTime.getTime() - lastPollTime.getTime();

            if (diff > maxDifference && hasTimedout == 0)
            {
                document.getElementById('heartbeat').src = '/web/resources/graphics/greylight.png';

                hasTimedout = 1;
            }
            else if (diff < maxDifference && hasTimedout == 1)
            {
                document.getElementById('heartbeat').src = '/web/resources/graphics/greenlight.png';

                hasTimedout = 0;
            }

            toggle_visibility('heartbeat');
        }

        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if (e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }

        setInterval("heartbeat()",20);    
    </script>

Please don't pass strings to `setInterval` and `setTimeout` - it's `eval` in disguise :( — Matt Ball, Apr 06 '11 at 14:48
What @Matt Ball means is that your setInterval call should be just `setInterval(heartbeat, 20);` — Pointy, Apr 06 '11 at 14:52
Keep increasing infinitely or going down sometimes? Could be just a difference between garbage collectors in FF and Chrome — Emmerman, Apr 06 '11 at 14:53
You should use a boolean for `hasTimedout`, there's no reason for a number there. Also, you can subtract dates directly, you don't need to `.getTime()` on them first. — Matt Ball, Apr 06 '11 at 14:53
@Matt thanks for `setTimeout` tip. I'll change that. It being a number is just due to legacy reasons. @Emmerman - no it continually increases over time so probably not a GC issue. — Chris, Apr 06 '11 at 14:55
+1 I was having memory leaks on FF4 and assumed it was due to my multiple ajax calls in the script, but now that I see this... as in your case, it doesn't happen in Chrome. — Aleadam, Apr 06 '11 at 14:56
@Aleadam so far I think FF4 is pure tosh, I can get to over 1gb memory usage within an hour. Even IE stays around 100mb. Ive also noticed that FF4 in W7 renders things massively different to FF4 in XP! — Chris, Apr 06 '11 at 15:16

score 2 · Accepted Answer · edited May 23 '17 at 11:47

Some info on Javascript garbage collection: SO Thread on JS GC

Of particular interest (perhaps):

Use delete statements. Whenever you create an object using a new statement, pair it with a delete statement. This ensures that all of the memory associated with the object, including its property name, is available for garbage collection. The delete statement is discussed more in “Freeing Objects.”
Use the var keyword. Any variable created without the var keyword is created at the global scope and is never eligible for garbage collection, presenting the opportunity for a memory leak.

I can only conclude that you should try pairing your object creation using the "new" keyword with delete statements and see if that makes a difference.

Otherwise the code looks fine.

Using `delete` definitely seems to have helped but its still increasing. +1 — Chris, Apr 06 '11 at 15:17

Javascript memory leak when switching between images (FireFox4)

1 Answers1

Linked