Using $timeout causes a memory leak

[jaitaiwan]

After much fun learning about memory leaks and how to use chrome's profiler and timeline. I finally found out the cause of my memory leak.

It appears that natively, a memory leak is created when passing a string to setTimeout instead of a function reference: http://pavel.kuzub.com/settimeout-memory-leak

An example of the code I was using that was faulty:

doTime = ->
    now = new Date()
    hour = if now.getHours().toString().length == 1 then "0" + now.getHours() else now.getHours()
    minute = if now.getMinutes().toString().length == 1 then "0" + now.getMinutes() else now.getMinutes()
    second = if now.getSeconds().toString().length == 1 then "0" + now.getSeconds() else now.getSeconds()
    $scope.clock = "#{hour}:#{minute}:#{second}"
    $timeout doTime, 2000
doTime()

changing

$timeout doTime, 2000

to

setTimeout doTime, 2000

Fixed the issue.

I assume that there is probably a call to $scope.$eval somewhere in $timeout which is what is causing the issue.

[IgorMinar]

we don't call settimeout with strings anywhere, so something else must be going on.

how did you diagnose the code above as leaky? do you see retained objects or something that could pinpoint the cause?

[jaitaiwan]

I kept receiving a chrome aww snap. After finding out what an aww snap
could be I was introduced to chromes profile and timeline tabs in the dev
console.

It showed the heap size growing as time passed and garbage collection
wasn't able to remove all instances. I made sure there were no connections
to objects etc and finally found that article. Once I changed it to
setTimeout garbage collection was able to happen correctly.

Sorry for the lack of technical terms, I've only delved into this the last
week.
On 06/11/2012 1:13 PM, "Igor Minar" notifications@github.com wrote:

we don't call settimeout with strings anywhere, so something else must be
going on.

how did you diagnose the code above as leaky? do you see retained objects
or something that could pinpoint the cause?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1522#issuecomment-10097812.

[BinaryMuse]

I happened upon this GitHub issue while diagnosing my own, similar problem. The code I was using was:

tick = ->
  $scope.time = ServerTime() // returns a promise based on some calculations
  $timeout tick, 5000
tick()

I noticed that after a while, I would get the "Aww snap" Chrome message, and after a while I noticed I could make it happen much faster by setting a a lower timeout; using a value of 10 caused my tab to become unresponsive and crash in under a minute. Heap snapshots show associated memory growth.

After some fiddling, I changed the code to:

tick = ->
  $scope.time = ServerTime() // returns a promise based on some calculations
  $scope.$apply()
  setTimeout tick, 5000
tick()

And I've found it works much better (even with a low timeout).

I hope this helps; please let me know if I can provide additional information.

[petebacondarwin]

Could you provide a working demo of this problem? This simple
implementation of what you describe doesn't have this problem:
http://plnkr.co/edit/wZyC4w.
I wonder if there is something inside your ServerTime function that is
actually the problem here?
Pete

On 12 November 2012 00:24, Brandon Tilley notifications@github.com wrote:

I happened upon this GitHub issue while diagnosing my own, similar
problem. The code I was using was:

tick = ->
$scope.time = ServerTime() // returns a promise based on some calculations
$timeout tick, 5000tick()

I noticed that after a while, I would get the "Aww snap" Chrome message,
and after a while I noticed I could make it happen much faster by setting a
a lower timeout; using a value of 10 caused my tab to become unresponsive
and crash in under a minute. Heap snapshots show associated memory growth.

After some fiddling, I changed the code to:

tick = ->
$scope.time = ServerTime() // returns a promise based on some calculations
$scope.$apply()
setTimeout tick, 5000tick()

And I've found it works much better (even with a low timeout).

I hope this helps; please let me know if I can provide additional
information.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1522#issuecomment-10274564.

[IgorMinar]

I wonder if this is related to #1313

[IgorMinar]

I can't repro this either. Anybody can provide more info? Ideally a working fiddle/plunker/html that leaks.

[BinaryMuse]

I've done some digging in the Chrome inspector, and it does look like my leak is related to the promises I use in ServerTime. Interestingly enough, I don't see the same issue with setTimeout. If I can get it down to a minimal example, I'll post a link and share some heap snapshots.

[jaitaiwan]

I was using angular 1.0.1 and initially it looked like this http://plnkr.co/edit/upkYuG was a replication of the problem but it doesn't seem to increase beyond a certain size. You could potentially take a look at my github to see where it was there jaitaiwan/CPresent pub-src/assets/js/compiled/presenter.coffee

TL;DR: Same code in my app as in plunkr http://plnkr.co/edit/upkYuG and can't replicate.

[IgorMinar]

@BinaryMuse any luck? example code would be awesome. if you can't repro it outside of your app having a heap snapshot would help too, though that's far from ideal, but definitely better than nothing. cc: @jaitaiwan

[jaitaiwan]

Unfortunately, I don't have a specific commit I can checkout to reproduce the issue, without re-factoring the commit to remove the other bugs which also prevented proper garbage collection. Unless of course you don't mind having a heap with that stuff in there as well?

[IgorMinar]

@jaitaiwan Can't you just swap setTimeout for $timeout and see if you can still reproduce the problem?

[jaitaiwan]

Here is a heap snapshot. https://docs.google.com/open?id=0B3xElvhp0JIhUW9jbUxzQkF0Ujg

[karlgoldstein]

This example here causes a rapid memory leak in both Chrome and FF (OS X) for me:

http://plnkr.co/edit/b25pmGVQyZJatuCwIRWU

I could only reproduce the leak when running the timeout inside a service, rather than in a controller.

Replacing $timeout with window.setTimeout stops the leak.

[Cufeadir]

I was able to reproduce the issue with the example that @petebacondarwin posted at http://plnkr.co/edit/wZyC4w by changing app.js line 11 to: return $timeout(tick, 1)

This is what the code produced by the CoffeeScript @BinaryMuse posted does. In CoffeeScript, adding a line containing just "null" to the end of the method (to make it return null) avoids the problem.

[BinaryMuse]

@Cufeadir Aha! Thank you -- I should have realized this was the problem, as $timeout returns a promise that resolves to the return value of the fn argument passed to it. Since CoffeeScript implicitly returns the value of the last expression in a function à la Ruby, the call to $timeout returned a promise that resolved to the promise that gets returned from the inner call to $timeout, etc.

@IgorMinar As mentioned by @Cufeadir, simply adding null as the return value at the end of my fn argument takes care of the issue for me, and my guess is it fixes the issue for anyone else who calls $timeout at the end of their own fn.