使用 JVectorMap 的 Javascript 内存泄漏答案

【问题标题】：Javascript memory leaks with JVectorMap使用 JVectorMap 的 Javascript 内存泄漏
【发布时间】：2016-01-06 02:57:38
【问题描述】：

我必须在一个项目中使用 javascript，但我对 javascript 一无所知。在 js 文件中，我使用 jVectorMap 显示每 5 秒“更新”一次的世界地图。当我在我的网络客户端中使用这个 javascript 文件打开网页并等待几个小时时，我的计算机内存不足。我使用 chrome 开发控制台和配置文件工具来识别产生此问题的代码部分。当我删除这部分时，没有内存使用问题。

部分代码是：

function ui_geo_map(countriesCount) {
    $('#geo-world-map').empty();
    $('#geo-world-map').vectorMap({
        map: 'world_mill_en',
        series: {
            regions: [{
                values: countriesCount,
                scale: ['#2ecc71', '#c0392b'],
                normalizeFunction: 'polynomial',
                legend: {vertical: true}
            }]
        },
        onRegionTipShow: function(e, el, code){
            el.html(el.html() + ' (' + countriesCount[code] + ' - servers)');
        }
    });
};

function ui_geo() {
    console.debug('Redrawing the geo map');
    $('.pywos-geo').remove();
    $.getJSON('/get/geo/all', function(data){
        $.each(data, function(key, val){
            countriesCount[val.country_code] = val.count;
        });
        ui_geo_map(countriesCount);
    });
};

我知道vectorMap后面的空肯定不是正确的方法，但如果我删除$('#geo-world-map').empty();，地图不会被替换，而是显示在前一个地图下面，这不是我想要的。

有人可以帮我找到正确的方法来避免任何内存泄漏吗？

【问题讨论】：

您可能想使用remove() instead of empty()，这样$('#geo-world-map') 中的节点将被删除而不是被清空。但我不太希望这能解决您的问题，因为这两个函数都不会泄漏内存。确保您拥有最新的 jquerylibrary。您可以继续删除更多代码，直到发现泄漏
@InsOp ：感谢您的回答。如果我删除对 ui_geo() 的任何调用，或者我不允许它每 5 秒更新一次，则不存在内存使用问题。这就是为什么我认为问题出在这个函数上。
如果你在你的ui_geo()-function 中也注释掉ui_geo_map(countriesCount); 是这种情况吗？
如果我只注释掉对 ui_geo_map() 的调用，则没有内存使用问题。
好的，尝试在$('#geo-world-map').empty();之后立即拨打delete $('#geo-world-map').vectorMap;

标签： javascript memory-leaks jvectormap

【解决方案1】：

首先有一个方法remove，你应该在 jVectorMap 实例上调用它，它可以优雅地删除所有 DOM 元素和链接的 JS 对象：

var map = new jvm.Map({
    container: $('#geo-world-map'),
    map: 'world_mill_en',
    series: {
        regions: [{
            values: countriesCount,
            scale: ['#2ecc71', '#c0392b'],
            normalizeFunction: 'polynomial',
            legend: {vertical: true}
        }]
    },
    onRegionTipShow: function(e, el, code){
        el.html(el.html() + ' (' + countriesCount[code] + ' - servers)');
    }
});

而且每次需要更新值时也不需要重新创建整个地图（这非常浪费资源），您可以只更新数据：

$.getJSON('/get/geo/all', function(data){
    $.each(data, function(key, val){
        countriesCount[val.country_code] = val.count;
    });
    map.series.regions[0].setValues(countriesCount);
});

【讨论】：

非常感谢您的回答。我明白这里的重点。但是我根本不是 js 专家，当我使用这段代码时，我得到了一个 NS_ERROR_FAILURE。
countriesCount is not defined at chen map is declared and the coutries only color is black,没有图例，似乎没有更新。