In an effort to become better at AngularJS - I have begun creating some reusable components. The component I am working on now is an Image slider/rotation. I have created a jsfiddle to reproduce the issue I am running into.
I'm using animationend to capture when the images have transitioned.
If you open the console and then click on the "next" or "previous" arrows the image will fade into the next one and then the text "on animation end" will appear in the console (you will have to wait until the animation ends to click again). If you continue to click roughly 16 times the animation starts to run slower and slower becoming completely unusable around 18 times (I'm using Chrome). I've tried to take memory snapshots to see what is going on - or even added "breaks" into the code to try to step through to see if something is out of the ordinary but have yet to find anything that stands out.
If I remove the css animation and simply switch between the images without any transition then the slider will work fine - but what good is an image slider without a fancy transition?
Looks like by continually copying the ctrl function the slider slowly spikes its memory. If I change the code from adding the full ctrl to the hy-slider to only adding a plain old javascript object then the memory stays consistent - i will add a jsfiddle soon.