Обнаружение и устранение утечки памяти

Я пытаюсь найти утечку памяти в примере здесь:

document.addEventListener('DOMContentLoaded', bindTabs);

function bindTabs(){
    var lastTab,
        tabs = document.querySelectorAll(".tabs li"),
        i;

    function selectTab(){
        activateTab(this);
        loadContent(this.attributes["data-load"].value);
    }

    function activateTab(tab){
        if (lastTab) {
            lastTab.classList.remove("active");
        }
        (lastTab = tab).classList.add("active");
    }

    [].forEach.call(tabs, function(el){
        el.addEventListener('click', selectTab, false);
    });
}


function loadContent(url){
    getContent(url).then(function(data){
        prepareContent(data);
        prepareGallery();
    })
}

var lastDiv;
function prepareContent(data){
    var content = document.getElementById("content"),
        div = document.createElement("div");
    div.innerHTML = data;
    if (lastDiv) {
        content.removeChild(lastDiv);
    }
    content.appendChild(div);
    lastDiv = div;
}

function prepareGallery(){
    var width = 426,
        forward = false,
        position = 0,
        elements = document.querySelectorAll(".gallery li"),
        number = elements.length;

    function checkDirection() {
        if (position === 0) {
            forward = true;
        } else if (position === (number  - 1)) {
            forward = false;
        }
    }

    function changeLeftProperty() {
        var value = (-1 * width * position) + "px";
        [].forEach.call(elements, function(el) {
          el.style.left = value;
        });
    }

    function advance(){
        position = position + (forward ? 1 : -1);
    }

    function move(){
        checkDirection();
        advance();
        changeLeftProperty();
    }
    setInterval(move, 2000);
}

function getContent(url){
    var callbacks = [],
        xhr = new XMLHttpRequest();

    xhr.open('GET', url, true);
    xhr.onload = function(e){
        if (xhr.status == 200) {
            callbacks.forEach(function(cb){
                cb(xhr.response);
            })
        }
    }
    xhr.send()
    return {
        then: function(fn){
            callbacks.push(fn)
        }
    }
}

Я профилировал страницу, делая кучу снимков и запуская временную шкалу, но, к сожалению, ничего не смог найти.

Можете ли вы подсказать мне, где может быть проблема и какова точная утечка памяти (если есть)?


person Community    schedule 07.11.2013    source источник
comment
Пожалуйста, всегда указывайте соответствующий код в вопросе, а не просто ссылку на него. Нет гарантии, что ссылка всегда будет доступна.   -  person Adi Inbar    schedule 07.11.2013


Ответы (1)


В prepareGallery есть setInterval(move, 2000);, который будет вызываться при каждом клике, а clearInterval нет.

person Luca Rainone    schedule 07.11.2013
comment
Итак, элементы списка .gallery li (и не только) просачиваются, верно? - person ; 07.11.2013
comment
Я внес изменения, и течи больше нет :) if(x) clearInterval(x); x = setInterval(move, 2000) . Хорошо поймал :) - person XCS; 07.11.2013
comment
Копия prepareGallery со своим свойством (elements, определения функций и т. д.) будет находиться в памяти при каждом щелчке. - person Luca Rainone; 07.11.2013