Kill and resurrect the animation tick

[mvindahl]

We run the animation tick at all times but we could be more intelligent and thus less wasteful with resources. We could make the function return false when no longer needed, making jQuery.fx purge it from its list. Conversely, we should be able to revive it when needed.

[equus71]

I had an problem with timer running after closing the angular-pan-zoom with the ui-router. I have the angular-pan-zoom only on some certain views. So user entering, leaving and re-entering the view with the panzoom got two running animation ticks in same time causing some minor problems with rendering.

My solution to that problem was to add to the panzoom's controller following code:

$scope.$on('$destroy', function () {
                timer_variable = false;
            });

Of course timer_variable is what the animation tick returns.
But I don't know jQuery.fx at all, so I don't know whether this can be treated as a solution or only a workaround for the problem of the running animation tick. What do you think @mvindahl ?

[mvindahl]

Hi equus,

What you are describing is definitely a serious issue that should be fixed. As you point out, the panzoom directive never unsubscribes from the jQuery animation tick. In hindsight it's obvious why this would cause problems once you add ngRoute to the equation.

As far as jQuery.fx is concerned, it's just a small (50 lines in the jQuery source) wrapper around the native browser setInterval. As a client you can register a callback to be notified on every tick. There is no unregister method; instead you unregister by returning false from your callback. If there is more than one callback registered, they share the same native interval callback. If the number drops to zero, the native interval is unregistered. If the number goes from zero to one it is resurrected. The interval is fixed by jQuery to 13 mSecs. There is not much more to it.

What your solution addresses is the need to make sure that the animation tick dies when its panzoom element is pulled off the page. I think listening on scope destroy is the obvious choice and I think I'd have written the code in the exact same way.

Actually, the issue of killing and resurrecting the animation tick is a different one, albeit also related to jQuery.fx. Most of the time the directive will be neither panning nor zooming, and the animation tick is unneeded. If it were to unregister itself during these extended periods of time, jQuery.fx would be able to unregister the setIntervar from the browser. I'm not sure how much it means for practical purposes but it's playing nice with the resources and jQuery.fx was designed for this.

I'll create a separate issue for the failure to unregister animation tick and fix it ASAP. Also, I'll have a look at this issue once I'm at it.