javascript - 发现并修复内存泄漏

标签 javascript memory-leaks google-chrome-devtools

我正在尝试查找示例中的内存泄漏 here :

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)
        }
    }
}

我通过获取堆快照和运行时间线来分析页面,但不幸的是我找不到任何东西。

你能告诉我问题出在哪里吗?确切的内存泄漏是什么(如果有的话)?

最佳答案

setInterval(move, 2000);prepareGallery每次点击都会被调用,没有clearInterval .

关于javascript - 发现并修复内存泄漏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19830681/

相关文章:

javascript - 如何在先前(未知)动画/效果完成后在 jQuery 中运行代码?

javascript - jQuery 嵌套 Accordion - 禁用自动打开

Javascript 从简单数据生成这个简单的数字数组

java - 内部最终对象可能存在内存泄漏(Java)

c - CPU如何从内存中读取数据?缓存如何发挥重要作用

javascript - 延迟加载 vue-i18n 中 `en.js` 或 `ja.js` 的格式是什么

c++ - 测试原始指针 c++,但找不到泄漏

http - Chrome 开发者工具 : Save specific requests in Network Tab

javascript - Puppeteer - 在框架内运行函数

css - 元素在开发工具中消失