Ionic 1 with Cache - are $timeouts automatically cancelled when changing route?


#1

I’m currently tracking any possible memory leak in my SPA. I’m trying to read the Timeline recordings results, but I’m a designer, have mercy…

Do I need to cancel the $timeout(s) created in a route controller, like advised? Or is it something taken care of by the Ionic framework?

If not, does the following snippets make sense? What’s the more efficient method?

Please note: these $timeouts encapsulate sequenced animations on DOM elements (“root level” UI blocks), on entering the view, and also on leaving, and since I use the Ionic Cache, I’m using

$scope.$on('$ionicView.afterEnter', function(){...
$scope.$on('$ionicView.leave', function(){...

instead of

scope.$on('$destroy', function() {...


So, which one from the methods below is the **more appropriated performance-wise?**

#Snippet 1 Self-destructing via promises:
		// ANIMATIONS ON VIEW ENTERING
		
			$scope.$on('$ionicView.afterEnter', function(){
				
				// IS var timeOutshowProductCardContainer NEEDED?
			    timeOutshowProductCardContainer = $timeout(function() {
			    
					    // THIS ANIMATIONS TAKES ROUGHLY 600ms
	 					$scope.showProductCardContainer = true;
			    
			    }, 44).then(function(){
			    	// SELF DESTRUCTING VIA PROMISE
			    	$timeout.cancel(timeOutshowProductCardContainer);
			    });

			    timeOutCSSProductCardContainer = $timeout(function() {
						$('.product_card_container').css({'pointer-events':'auto'});
			    }, 600).then(function(){
			    	$timeout.cancel(timeOutCSSProductCardContainer);
			    });
				
			}); // - EOF - $scope.$on
			
		// - EOF - ANIMATIONS ON VIEW ENTERING

##Snippet 2 Question: When destroyed, will the all encapsulated, promise chained \$timeouts be cancelled by cancelling the initator only? How much \$timeouts do you think can I chain this way?
		// ANIMATIONS ON VIEW LEAVING
			
			$scope.goToState = function(state, stateOptions){
                timeOutgoToState = $timeout(function(){
						$('.product_card_container').css({'pointer-events':'wait'});					
						$scope.showProductCardContainer = false;		                  
				},44)
				.then(function(){
					return $timeout(function(){
						$state.go(state,stateOptions);
					},600);
				});
					
		// - EOF - ANIMATIONS ON VIEW LEAVING




##Snippet 3
Declaring each $timeout, and cancel them with Ionic View Events:

	...
// MAKE SURE WE DESTROY ANY SINGLE DECLARED TIMEOUT, NOT CHAINED, NOT SELF-DESTROYED, UPON LEAVING THE VIEW

	$scope.$on('$ionicView.leave', function() {
        $timeout.cancel( timeOutshowProductCardContainer );
        $timeout.cancel( timeOutCSSProductCardContainer );
        $timeout.cancel( timeOutgoToState );
	});

Thanks.