Problem: Each time I go through a pair of mouseenter-mouseleave event-handlers my browser gets slower.
I have another (unrelated) reziable() element, that’s already quite slow. But after ~ 50 iterations through the mouseenter-mouseleave events the resizble becomes almost unusable.
That’s how I noticed the problem
Scenario: a bunch of stamp-sized divs each contains user-input. When I mouse-over them they swell up to reveal the full content, and when I mouse-out they shrink back to stamp-size again.
There’s a bit of calculation going on, using both local and global variables, determining the full size, before the inflation animation (negative margins) starts. The shrinking just animates the margins back to zero.
Watching the system-monitor, I can see then the browser (FF, chrome and opera) is eating memory quite fiercly, when I mouse-over these boxes repeatedly…
– also remove()’ing the stamps (and thus their events) doesn’t make the browser faster again. It stays agonizingly slow until I reload the entire page..
Any idea as to what I could be doing wrong ?
PS: The actual code is several hundred lines, so I’ll spare you that missery for now 🙂
EDIT: The code is here: http://dagfordag.dk/tegn.js
The function tegnIkon() creates a div, does some initial size-calculation, and then attaches the two events.
No more events are being bound after that.
Got it !
My (live) toolTipper was working furiously in the background, throwing up setTimeouts() by the ton each time a new element appeared behind my mouse..
– Killed it. Now everything is smooth as silk : D
(The hint was: The “memory leak” wasn’t permanent – just much slower to recover than expected)