Appcelerator memory leaks - Alloy framework

Question

I am using the Alloy framework in Appcelerator and have been struggling with memory leaks while testing my app with Apple Instruments.

I have a scrollable view, views that are the views or "pages" of that scrollable view and views like thumbnails that are the children of the "page" views. All of these views are being created dynamically and then removed and recreated when a user performs a search which reloads the contents of the scrollable view.

My issue is that even though I am removing the scrollable view and setting it to null the live bytes in Instruments continues to grow every time a search is performed and a new scrollable view is created. How should I be handling these UI elements in order for garbage collection to remove them?

var videoSlider;

function loadData(searchTerms,channel,sortBy,limit) {
if (videoSlider) {
    $.scrollableViewHolder.remove(videoSlider);
    videoSlider = null;
}

videoSlider = Alloy.createController('videoSlider', {}).getView();
$.scrollableViewHolder.add(videoSlider);

var viewSliderArray = [];

feeds.GetFeeds({
    success: function(data) {
        Ti.API.info("Number of videos returned from Brightcove " + videosObject.items.length);
        var j = 0;
        for(var i=0; i<videosObject.items.length; i++) {
            if(i % 8 == 0) {
                Ti.API.info(i);
                if(i > 0) {
                    viewSliderArray.push(viewSlider);
                }
                viewSlider = Alloy.createController('viewSlider', {}).getView();
                j = 0;
            }

            tempTime = videosObject.items[i].length/1000;
            minutes = Math.round(tempTime/60);
            seconds = Math.round(tempTime%60);
            seconds = "0"+seconds;
            seconds = seconds.substr(seconds.length-2);

            videoLength = minutes+":"+seconds;

            videoBox = Alloy.createController('videoBox', {
                videoBoxTop: videoBoxTop[j],
                videoBoxLeft: videoBoxLeft[j],
                videoStill : videosObject.items[i].videoStillURL,
                videoTitle: videosObject.items[i].name,
                videoLength: videoLength
            }).getView();

            viewSlider.add(videoBox);
            j++;
        }
        viewSliderArray.push(viewSlider);

        Ti.API.info(viewSliderArray);

        videoSlider.views = viewSliderArray;
    }
},searchTerms,channel,sortBy,limit);

}

Answer 1

Remove all the childrens from the scrollview and set them as null. Here is a sample code which might be useful for you :

exports.removeChildren = function(thisView){
if (thisView.children) 
{
    var removeData = [];
    for (var i = thisView.children.length; i > 0; i--)
    {
       removeData.push(thisView.children[i-1]);  
    };
    // Remove childrens
    for (var i = 0; i < removeData.length; i++)
    {
       thisView.remove(removeData[i]);
    }
    removeData = null;
}
}

Answer 2

Try this for cleaning memory of your view.

 clean(Your_View);
 Your_View = null;

function do_clean(e, c) {
    try{
        clean(c);
    e.remove(c);
    c = null;
    }catch(ex){
        Ti.API.info('Exception in removing child: '+ex +'children :'+c);
    }
    return;
}

function clean(e) {
    if (e != null) {
        if (e.children) {
            for (var i = 0; i < e.children.length; i++) {
                if(e.children[0] != undefined && e.children[0] != null)
                    do_clean(e, e.children[0]);
            }
        } else {
            return;
        }
    }
}

Also try to remove all eventListeners which is not needed.

Answer 3

You need to call removeAllChildren on the scrollview and also set viewSliderArray to an empty array, i.e., viewSliderArray = [], otherwise the references are going to be maintained.

Also while using Instruments can you search for TiUI and see as to which view is specifically increasing, that way you can pin point the particular views which are giving you the trouble.