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.